Display content in a responsive, 12-column grid. [docs]
1/3, 2/3 columns on screen and tablet, two equal columns on mobile
[row class=”row-demo”]
[col medium=”4″ small=”6″]
.medium-4.small-6.columns[/col]
[col medium=”8″ small=”6″]
.medium-8.small-6.columns[/col]
[/row]
Two columns on screen and tablet, one column on mobile
[row class=”row-demo”]
[col large=”3″ medium=”6″]
.large-3.medium-6.columns[/col]
[col large=”3″ medium=”6″]
.large-3.medium-6.columns[/col]
[col large=”3″ medium=”6″]
.large-3.medium-6.columns[/col]
[col large=”3″ medium=”6″]
.large-3.medium-6.columns[/col]
[/row]
Three columns on screen and tablet, two columns on mobile
[row class=”row-demo”]
[col medium=”3″ small=”6″]
.medium-3.small-6.columns[/col]
[col medium=”3″ small=”6″]
.medium-3.small-6.columns[/col]
[col medium=”6″ small=”6″]
.medium-6.small-12.columns[/col]
[/row]
Offset columns
[row class=”row-demo”]
[col large=”9″ large_offset=”3″]
.large-9.large-offset-3.columns[/col]
[/row]
Nested columns
[row class=”row-demo”]
[col medium=”6″]
.medium-6[row_row][col_col medium=”6″]
.medium-6[/col_col][col_col medium=”6″]
.medium-6[/col_col][/row_row][/col]
[col medium=”6″]
.medium-6[row_row][col_col medium=”6″]
.medium-6[/col_col][col_col medium=”6″]
.medium-6[/col_col][/row_row][/col]
[/row]
