fixes #13775: tweak grid nesting docs about # of cols, change up example slightly

docs/_includes/css/grid.html

@@ -347,30 +347,30 @@
 
 
   <h3 id="grid-nesting">Nesting columns</h3>
-  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p>
+  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
   <div class="row show-grid">
-    <div class="col-md-9">
+    <div class="col-sm-9">
       Level 1: .col-md-9
       <div class="row show-grid">
-        <div class="col-md-6">
-          Level 2: .col-md-6
+        <div class="col-xs-8 col-sm-6">
+          Level 2: .col-xs-8 .col-md-6
         </div>
-        <div class="col-md-6">
-          Level 2: .col-md-6
+        <div class="col-xs-4 col-sm-6">
+          Level 2: .col-xs-4 .col-md-6
         </div>
       </div>
     </div>
   </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-9">
+  <div class="col-sm-9">
     Level 1: .col-md-9
     <div class="row">
-      <div class="col-md-6">
-        Level 2: .col-md-6
+      <div class="col-xs-8 col-sm-6">
+        Level 2: .col-xs-8 .col-md-6
       </div>
-      <div class="col-md-6">
-        Level 2: .col-md-6
+      <div class="col-xs-4 col-sm-6">
+        Level 2: .col-xs-4 .col-md-6
       </div>
     </div>
   </div>