offset_order.md

Order / Offset

For layouts or content that need to move across the grid, you can look to offset and order utility classes to achieve this effect.

Flex Order

Switch $column-order-classes to true in _config.scss to use order modifiers.

.xsmall-order-2.large-order-1

.xsmall-order-1.large-order-2

<div class="grid">
  <div class="row">
    <div class="xsmall-order-2 large-order-1 columns">...</div>
    <div class="xsmall-order-1 large-order-2 columns">...</div>
  </div>
</div>

Offset

You can also use traditional offset if you need to break out of the grid. Switch $column-offset-classes to true.

.xsmall-offset-0.large-offset-2

.xsmall-offset-0.large-offset-6

<div class="grid">
  <div class="row">
    <div class="xsmall-offset-0 large-offset-2 xsmall-4 columns">...</div>
    <div class="xsmall-offset-0 large-offset-6 xsmall-6 columns">...</div>
  </div>
</div>

Is this article inaccurate? Edit this page on Github!