fixes #4896: reflect media query order in docs

docs/scaffolding.html

@@ -413,14 +413,16 @@
             </thead>
             <tbody>
               <tr>
-                <td>Phones</td>
-                <td>480px and below</td>
-                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+                <td>Large display</td>
+                <td>1200px and up</td>
+                <td>70px</td>
+                <td>30px</td>
               </tr>
               <tr>
-                <td>Phones to tablets</td>
-                <td>767px and below</td>
-                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+                <td>Default</td>
+                <td>980px and up</td>
+                <td>60px</td>
+                <td>20px</td>
               </tr>
               <tr>
                 <td>Portrait tablets</td>
@@ -429,31 +431,29 @@
                 <td>20px</td>
               </tr>
               <tr>
-                <td>Default</td>
-                <td>980px and up</td>
-                <td>60px</td>
-                <td>20px</td>
+                <td>Phones to tablets</td>
+                <td>767px and below</td>
+                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
               </tr>
               <tr>
-                <td>Large display</td>
-                <td>1200px and up</td>
-                <td>70px</td>
-                <td>30px</td>
+                <td>Phones</td>
+                <td>480px and below</td>
+                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
               </tr>
             </tbody>
           </table>
 <pre class="prettyprint linenums">
-/* Landscape phones and down */
-@media (max-width: 480px) { ... }
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) { ... }
+/* Large desktop */
+@media (min-width: 1200px) { ... }
 
 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) { ... }
 
-/* Large desktop */
-@media (min-width: 1200px) { ... }
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) { ... }
+
+/* Landscape phones and down */
+@media (max-width: 480px) { ... }
 </pre>
 
 

docs/templates/pages/scaffolding.mustache

@@ -345,14 +345,16 @@
             </thead>
             <tbody>
               <tr>
-                <td>{{_i}}Phones{{/i}}</td>
-                <td>480px and below</td>
-                <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
+                <td>{{_i}}Large display{{/i}}</td>
+                <td>1200px and up</td>
+                <td>70px</td>
+                <td>30px</td>
               </tr>
               <tr>
-                <td>{{_i}}Phones to tablets{{/i}}</td>
-                <td>767px and below</td>
-                <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
+                <td>{{_i}}Default{{/i}}</td>
+                <td>980px and up</td>
+                <td>60px</td>
+                <td>20px</td>
               </tr>
               <tr>
                 <td>{{_i}}Portrait tablets{{/i}}</td>
@@ -361,31 +363,29 @@
                 <td>20px</td>
               </tr>
               <tr>
-                <td>{{_i}}Default{{/i}}</td>
-                <td>980px and up</td>
-                <td>60px</td>
-                <td>20px</td>
+                <td>{{_i}}Phones to tablets{{/i}}</td>
+                <td>767px and below</td>
+                <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
               </tr>
               <tr>
-                <td>{{_i}}Large display{{/i}}</td>
-                <td>1200px and up</td>
-                <td>70px</td>
-                <td>30px</td>
+                <td>{{_i}}Phones{{/i}}</td>
+                <td>480px and below</td>
+                <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
               </tr>
             </tbody>
           </table>
 <pre class="prettyprint linenums">
-/* {{_i}}Landscape phones and down{{/i}} */
-@media (max-width: 480px) { ... }
-
-/* {{_i}}Landscape phone to portrait tablet{{/i}} */
-@media (max-width: 767px) { ... }
+/* {{_i}}Large desktop{{/i}} */
+@media (min-width: 1200px) { ... }
 
 /* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
 @media (min-width: 768px) and (max-width: 979px) { ... }
 
-/* {{_i}}Large desktop{{/i}} */
-@media (min-width: 1200px) { ... }
+/* {{_i}}Landscape phone to portrait tablet{{/i}} */
+@media (max-width: 767px) { ... }
+
+/* {{_i}}Landscape phones and down{{/i}} */
+@media (max-width: 480px) { ... }
 </pre>