Reordering
Order classes
Use .order-
classes for controlling the visual order of your content. These classes are responsive, so you can set the order
by breakpoint (e.g., .order-1.order-md-2
). Includes support for 1
through 12
across all five grid tiers.
<div class="container">
<div class="row">
<div class="col"> First, but unordered </div>
<div class="col order-12"> Second, but last </div>
<div class="col order-1"> Third, but first </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col order-last"> First, but last </div>
<div class="col"> Second, but unordered </div>
<div class="col order-first"> Third, but first </div>
</div>
</div>
There are also responsive .order-first
and .order-last
classes that change the order
of an element by applying order: -1
and order: 13
(order: $columns + 1
), respectively. These classes can also be intermixed with the numbered .order-*
classes as needed.
Offsetting columns
You can offset grid columns in two ways: our responsive .offset-
grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
Offset classes
Move columns to the right using .offset-md-*
classes. These classes increase the left margin of a column by *
columns. For example, .offset-md-4
moves .col-md-4
over four columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>