So we have a pattern where we have text in the left column and then the right column is links, asides, etc. When the browser is < 1024px we center the left column but have it say the same width as it was when > 1024px.
The side bar either disappears completely or wraps underneath matching the width and centering of the left column.
To enable this behavior just add .large-centered-column to any large-X column
Right column that will wrap underneath the left column
Also has .large-centered-column class applied.
This will work for any large-X column. The above example is a large-8 and this one is a large-6.
The trick for the right columns is you need to define the large-X size as well as the full-X size and full-offset-X
At < 600px the columns goto full width.
Here is an example where the folded under column isn't the same size as the left column
This right column will be a different size when it folds under
Also we have .full-centered-column for when at > 1024px if you want to use it without any right column
This will goto full width at < 1024px because it doesn't have any .large-centered-column defined.
However this one does. (Needed to add more text here so the effect is actually shown)
This is an example with a skinny left column
With this, the left column will show up first in the stacked view when < 1024px
This column will fold under the right column at < 1024px
We can change that by using basic grid's helper classes for flow control.