Offsetting, Nesting & Reordering Columns

A plain 12-column split gets you a long way, but three extra tools handle the layouts that don't fit evenly: shifting a column over with an offset, nesting a fresh grid inside a single column, and visually reordering columns without touching their source order.

Offsetting Columns with .col-md-offset-*

.col-{breakpoint}-offset-* pushes a column to the right by adding left margin equal to that many grid units - handy for centering a column that doesn't span the full width, without needing an empty spacer column:

<div class="row">
  <div class="col-md-8 col-md-offset-2">
    Centered trail summary
  </div>
</div>
<!-- 8 + 2 offset + 2 leftover space = 12, so the column sits centered -->

Nesting a .row Inside a Column

Any column can contain its own fresh .row, which restarts a brand-new 12-unit grid scoped to that column's width - useful for splitting a single column into smaller pieces without disturbing the outer layout:

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-xs-6">Distance: 6.4 mi</div>
      <div class="col-xs-6">Elevation: 1,120 ft</div>
    </div>
  </div>
  <div class="col-md-4">
    Sidebar
  </div>
</div>

The nested col-xs-6 pair is measured against the 8-unit-wide parent column, not the full page - each nested column ends up roughly 4 units of the original grid wide, not literally half the page.

Reordering Columns with .col-md-push-* / .col-md-pull-*

push shifts a column to the right using relative positioning, and pull shifts one to the left, by that many grid units - together they let you write two columns in one source order but display them in a different visual order at a given breakpoint. A common reason to do this: write the main content first in the HTML (better for screen readers and SEO) but display a sidebar first visually on desktop.

<div class="row">
  <!-- written first in the source... -->
  <div class="col-md-9 col-md-push-3">
    Trail description and photos
  </div>
  <!-- ...but displayed first visually on md screens and up -->
  <div class="col-md-3 col-md-pull-9">
    Difficulty, distance, elevation
  </div>
</div>