Columns Stacked 2 & 1

By adding stack to the outer div, columns will stack to 2 columns on widths less than 768px and 1 column on widths less than 480px. You can also use this with percentage columns. See also stacking to 1 column.


<div class="f4 stack">
    <div class="one">
        Column 1
    </div>
    <div class="two">
        Column 2
    </div>
    <div class="three">
        Column 3
    </div>
    <div class="four">
        Column 4
    </div>
</div>

Here's the available columns and output:

4 columns

1
2
3
4
1
2 - 4
1 - 2
3 - 4
1 - 3
4

6 columns

1
2
3
4
5
6
1
2 - 6
1 - 2
3 - 6
1 - 3
4 - 6
1 - 4
5 - 6
1 - 5
6

8 columns

1
2
3
4
5
6
7
8
1
2 - 8
1 - 2
3 - 8
1 - 3
4 - 8
1 - 4
5 - 8
1 - 5
6 - 8
1 - 6
7 - 8
1 - 7
8