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

diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 593b02a434345fa83ce3d42528e2f19721c5aa4a..8ff53dd710c3ef0cebfe98695607abc3b2a96f80 100644 (file)
--- a/docs/_includes/css/grid.html
+++ b/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>