Grid: Column Offsets

A grid's children can be "pushed" around inside of the grid. This is useful when you need to precisely separate a grid's children.

Example #1

Medium - 4 columns wide, pushed over 2 columns
Extra Large - Pushed over 1 column

Medium - 4 columns wide, pushed over 2 columns
Extra Large - Pushed over 3 columns

<div class="grid">
    <div class="grid-col grid-col--md-4 grid-col--md-push-2 grid-col--xl-push-1">
        [...]
    </div>
    <div class="grid-col grid-col--md-4 grid-col--md-push-2 grid-col--xl-push-3">
        [...]
    </div>
</div>