Just apply the class o-12-grid to a container (either an oxygen section or a div) to genenrate the 12 columns grid.

To help you design your layout over the 12 columns, create a temporary div (you will delete it when you are finished). Give the class o-12-grid-helper-lines to this div.

This will generate subtle underlying vertical lines to help you visualize the columns.

You can make an element span multiple columns with the class o-span-{2-12} or span multiple rows with the class o-rspan-{1-12}.

You can assign different spans for different breakpoints. Give the class o-{breakpoint}-span-{1-12} to the element.

Use o-{breakpoint}-rspan-{1-12} for rows.

Available breakpoints are : xxs - xs - sm - md - lg - xl - xxl

You can specify the starting column or row for an element with the class o-cstart-{1-12} or o-rstart-{1-12}.

Decide of the start columns and rows per breakpoints with the class o-{breakpoint}-cstart-{1-12} for columns and o-{breakpoint}-rstart-{1-12} for rows.

Available breakpoints are : xxs - xs - sm - md - lg - xl - xxl

You can make an element span multiple columns and specify the start column with the class o-span-{1-12}-{1-12} which reads in plain english o-span-{from column X}-{for Y columns}.

For example, o-span-3-7 is an element than spans from column 3 for 7 columns (up to column 9). o-rspan-2-2 is an element than spans from row 2 for 2 rows (up to row 3).

These advanced spans also support different breakpoints. Give the class o-{breakpoint}-span-{1-12}-{1-12} to the element.

Available breakpoints are : xxs - xs - sm - md - lg - xl - xxl

You can visualy reorder an element with the classes o-first and o-last.

Please note that this reorder elements visually, but doesn't modify the DOM. Just keep that in mind for accessibility and keyboard navigation.

Reorder elements at a given breakpoint. Give the class o-{breakpoint}-{first-last} to the element.

Available breakpoints are : xxs - xs - sm - md - lg - xl - xxl