Sidebar Layout

OTW grid gives the ability to push and pull elements. This means you can define elements in different order and still be able to control which one comes first.

This Content Column has a width of sixteen columns (.otw-sixteen)

This sidebar is defined after the Content Column. It has a width of eight columns (.otw-eight) and it is pulled sixteen columns to the left
(.otw-pull-sixteen)

This Content Column has a width of twelve columns (.otw-twelve) and is pushed twelve columns to the right (.otw-push-twelve). In this way we placed it in the end

The First Sidebar has a width of six columns (.otw-six) it is pulled twelve columns to the left (.otw-pull-twelve). This setup makes it come first on the row of the grid

The Second Sidebar has also a width of six columns (.otw-six) and it is also pulled twelve columns to the left (.otw-pull-twelve), which makes it come next to the First Sidebar

Content Column

First Sidebar

Content Column

First Sidebar

Second Sidebar

Content Column

First Sidebar

Second Sidebar