Bootstrap 3.2 Responsive Utilities > Test Cases (modified from the original)

bootstrap-grid-breakpoint-labels.html

<!-- Bootstrap 3.2 Responsive Utilities > Test Cases - http://getbootstrap.com/css/#responsive-utilities-tests -->
<!-- This can be added to a project as needed -->
<!-- Add the helper class "hidden" to the main div if you want to temporarily hide it -->

<div class="row responsive-utilities-test visible-on">
	<div style="position:fixed; bottom:10px; left:10px; z-index:9999; padding:10px; background:rgba(255, 0, 255, 0.70); font-weight:bold; letter-spacing:1px;">
		<span class="visible-xs-block">Extra small (xs) | Phones (<768px)</span>
		<span class="visible-sm-block">Small (sm) | Tablets (≥768px)</span>
		<span class="visible-md-block">Medium (md) | Desktops (≥992px)</span>
		<span class="visible-lg-block">Large (lg) | Desktops (≥1200px)</span>
	</div>
</div>

grid-breakpoint-labels.css

/* Not Bootstrap dependant */

html > body:before {content:""; position:fixed; bottom:10px; left:10px; z-index:99999999; padding:10px; color:#fff; font-size:14px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; background:rgba(255, 0, 255, 0.80); letter-spacing:1px;}

/* Large desktop - lg */
@media screen and (min-width: 1200px) {
	html > body:before {content:"Large (lg) | Desktops (\2265 1200px)";}
}
 
/* Medium Desktop - md */
@media screen and (max-width: 1200px) {
	html > body:before {content:"Medium (md) | Desktops (\2265 992px)";}
}
 
/* Small Desktop to Landscape tablet - sm */
@media screen and (max-width: 992px) {
	html > body:before {content:"Small (sm) | Tablets (\2265 768px)";}
}
 
/* Landscape phone to portrait tablet - xs */
@media screen and (max-width: 767px) {
	html > body:before {content:"Extra small (xs) | Phones (<768px)";}
}
 
/* iphone5 landscape */
@media screen and (max-width: 480px) {
	html > body:before {content:"iPhone5 Landscape (max-width: 480px)";}
}
 
/* iphone5 portrait */
@media screen and (max-width: 320px) {
	html > body:before {content:"iPhone5 Portrait (max-width: 320px)";}
}