</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>
<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>
</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>
<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>