clarify responsive docs on media queries

docs/scaffolding.html

@@ -486,13 +486,13 @@
             <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
           </tr>
           <tr>
-            <td>Portrait tablets</td>
+            <td>Smartphones to tablets</td>
-            <td>480px to 768px</td>
+            <td>767px and below</td>
             <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
           </tr>
           <tr>
-            <td>Landscape tablets</td>
+            <td>Portrait tablets</td>
-            <td>768px to 979px</td>
+            <td>768px and above</td>
             <td>42px</td>
             <td>20px</td>
           </tr>

docs/templates/pages/base-css.mustache

@@ -589,10 +589,16 @@
         </thead>
         <tbody>
           <tr>
-            <td>1</td>
+            <td rowspan="2">1</td>
-            <td colspan="2">Mark Otto</td>
+            <td>Mark</td>
+            <td>Otto</td>
             <td>CSS</td>
           </tr>
+          <tr>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>HTML</td>
+          </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>

docs/templates/pages/scaffolding.mustache

@@ -410,13 +410,13 @@
             <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
           </tr>
           <tr>
-            <td>{{_i}}Portrait tablets{{/i}}</td>
+            <td>{{_i}}Smartphones to tablets{{/i}}</td>
-            <td>480px to 768px</td>
+            <td>767px and below</td>
             <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
           </tr>
           <tr>
-            <td>{{_i}}Landscape tablets{{/i}}</td>
+            <td>{{_i}}Portrait tablets{{/i}}</td>
-            <td>768px to 979px</td>
+            <td>768px and above</td>
             <td>42px</td>
             <td>20px</td>
           </tr>