Default Behavior: You set the columns for the desktop and the grid will maintain those columns till you shrink screen size down to mobile-landscape view (736px). At that point, all columns are assinged 100% width of screen.

DEFAULT THREE COLUMN LAYOUT

First Column
Second Column
Third Column

—grid-123—

What if you want your columns, say a three column layout to become a 2-column layout on the iPad and then a 1-column layout on the iPhone?
You add the grid-123 class to the row.

grid-123 Behavior: You set the columns for desktop and the grid will maintain those columns till you shrink screen size down to ipad (1024px). At that point, all columns are assinged 50% width of screen. As you shrink the screen size further, the columns are assigned 100% width.

THREE COLUMN LAYOUT THAT FOLLOWS THE grid-123 Behavior

First Column
Second Column
Third Column

FOUR COLUMN LAYOUT THAT FOLLOWS THE grid-123 Behavior

First Column
Second Column
Third Column
Fourth Column

What if you want your grid to break-out of the page?
You close the page, using the “close” shortcode. You assign one of the following classes to limit the size of grid (.max940 or .max1440 or .max2000)

FOUR COLUMN LAYOUT BREAKSOUT OF PAGE

First Column
Second Column
Third Column
Fourth Column