make it a thing

docs/layout/responsive-utilities.md

-<div class="bs-docs-section">
-  <h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
+---
+layout: page
+title: Responsive utilities
+---
 
-  <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
-  <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
+For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
 
+Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
 
-  <h2 id="responsive-utilities-classes">Available classes</h2>
-  <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
-  <div class="table-responsive">
+##  Available classes
+
+Use a single or combination of the available classes for toggling content across viewport breakpoints.
+
+<div class="table-responsive">
   <table class="table table-bordered table-striped responsive-utilities">
     <thead>
       <tr>
@@ -91,10 +95,11 @@
       </tr>
     </tbody>
   </table>
-  </div>
+</div>
+
+As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS `display` property value listed below.
 
-  <p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
-  <div class="table-responsive">
+<div class="table-responsive">
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -117,12 +122,12 @@
       </tr>
     </tbody>
   </table>
-  </div>
-  <p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
+</div>
+<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
 
-  <h2 id="responsive-utilities-print">Print classes</h2>
-  <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
-  <div class="table-responsive">
+<h2 id="responsive-utilities-print">Print classes</h2>
+<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
+<div class="table-responsive">
   <table class="table table-bordered table-striped responsive-utilities">
     <thead>
       <tr>
@@ -148,15 +153,17 @@
       </tr>
     </tbody>
   </table>
-  </div>
+</div>
+
+## Test cases
 
+Resize your browser or load on different devices to test the responsive utility classes.
 
-  <h2 id="responsive-utilities-tests">Test cases</h2>
-  <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
+### Visible on...
 
-  <h3>Visible on...</h3>
-  <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
-  <div class="row responsive-utilities-test visible-on">
+Green checkmarks indicate the element **is visible** in your current viewport.
+
+<div class="row responsive-utilities-test visible-on">
   <div class="col-xs-6 col-sm-3">
     <span class="hidden-xs">Extra small</span>
     <span class="visible-xs-block">&#10004; Visible on x-small</span>
@@ -174,8 +181,8 @@
     <span class="hidden-lg">Large</span>
     <span class="visible-lg-block">&#10004; Visible on large</span>
   </div>
-  </div>
-  <div class="row responsive-utilities-test visible-on">
+</div>
+<div class="row responsive-utilities-test visible-on">
   <div class="col-xs-6 col-sm-6">
     <span class="hidden-xs hidden-sm">Extra small and small</span>
     <span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
@@ -202,11 +209,13 @@
     <span class="hidden-sm hidden-md">Small and medium</span>
     <span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
   </div>
-  </div>
+</div>
 
-  <h3>Hidden on...</h3>
-  <p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
-  <div class="row responsive-utilities-test hidden-on">
+### Hidden on...
+
+Here, green checkmarks also indicate the element **is hidden** in your current viewport.
+
+<div class="row responsive-utilities-test hidden-on">
   <div class="col-xs-6 col-sm-3">
     <span class="hidden-xs">Extra small</span>
     <span class="visible-xs-block">&#10004; Hidden on x-small</span>
@@ -224,8 +233,8 @@
     <span class="hidden-lg">Large</span>
     <span class="visible-lg-block">&#10004; Hidden on large</span>
   </div>
-  </div>
-  <div class="row responsive-utilities-test hidden-on">
+</div>
+<div class="row responsive-utilities-test hidden-on">
   <div class="col-xs-6 col-sm-6">
     <span class="hidden-xs hidden-sm">Extra small and small</span>
     <span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
@@ -252,5 +261,4 @@
     <span class="hidden-sm hidden-md">Small and medium</span>
     <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
   </div>
-  </div>
 </div>