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.

					
Copy to clipboard
<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>

Copy to clipboard
<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.

					
Copy to clipboard
<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>

Copy to clipboard
<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>

Copy to clipboard
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>