Layout

The grid system should be used to layout boxes & forms. The grid requires a minimum of 2 components, the columns, and the row that wraps the columns.

For equally spaced columns that stay inline at all breakpoints, you can use the basic .sui-col:

For more control over column behavior for different breakpoints, there is a 12 column grid similar to Bootstrap 3 naming conventions & behavior but powered by flexbox instead of floats:

You can reverse the order of the columns by adding the class .sui-reverse to the .sui-row element.

Use a single or combination of the available classes for toggling content across viewport breakpoints.