Shortcodes – Columns

.backfill-text {background: #444; color: #fff; padding: 25px 0; text-align: center; font-size: 14px;}

Columns are based on the Foundation Grid. This is a flexible grid system, based on 12 columns, that allows you to customize the size of columns for small, medium, or large screens.

Rows

All columns must be placed in rows. So each group of columns should be wrapped in the [row] shortcode like so:

[row] ... [/row]

Columns

Columns are defined based on the screen size:

Small (e.g. mobile phones)
Medium (e.g. tablets)
Large (e.g. desktop)

Each screen size is comprised of 12 columns. So your column sizes for each row should add up to 12 (e.g. 6 and 6, 5 and 7, or 4, 4 and 4).

Example:

[row]
[column small="12" medium="6" large="6"] [/column]
[/row]

Only one size parameter is required and we suggest using the large parameter, as it will collapse to full width (12 columns) on smaller screens.
Example:

[row]
[column large="6"] [/column]
[column large="6"] [/column]
[/row]

Examples:

[row]
[column large="4"]Large - 4 columns[/column]
[column large="4"]Large - 4 columns[/column]
[column large="4"]Large - 4 columns[/column]
[/row]
[row]
[column small="12" large="4"]Small - 12 columns, Large - 4 columns[/column]
[column small="6" large="4"]Small - 6 columns, Large - 4 columns[/column]
[column small="6" large="4"]Small - 6 columns, Large - 4 columns[/column]
[/row]
[row]
[column small="12" large="3"]Small - 12 columns, Large - 3 columns[/column]
[column small="12" large="9"]Small - 12 columns, Large - 9 columns[/column]
[/row]
[row]
[column small="12" medium="6" large="4"]Small - 12 columns, Medium - 6 columns, Large - 4 columns[/column]
[column small="12" medium="6" large="8"]Small - 12 columns, Medium - 6 columns, Large - 8 columns[/column]
[/row]