Grid System

Bootstrap 3's grid divides horizontal space into 12 columns using floats, not flexbox. Every TrailMap layout - the trail listing grid, the detail page's photo-plus-stats split - is built from a .row containing one or more explicitly-prefixed .col-*-* elements.

The 12-Column Float Grid

Each column class is a percentage width implemented with float: left. A column spanning 4 of the 12 units takes a third of the row's width; three of them side by side fill the row exactly. Because it's float-based rather than flexbox-based, columns in the same row are not automatically equal-height the way they are in later Bootstrap versions - a taller column's content can visually overflow past a shorter sibling unless you handle it yourself.

Four Breakpoint Prefixes

Bootstrap 3 needs an explicit prefix for every breakpoint, including the smallest one - there's no bare, un-prefixed .col-* class:

.row and the Clearfix

Because columns are floated, a .row needs its own clearfix so that content placed after it doesn't creep up alongside the floated columns. Bootstrap 3 builds this clearfix directly into the .row class, so you never add it yourself - just make sure every .col-*-* is a direct child of a .row:

<div class="row">
  <div class="col-xs-12 col-sm-4">One</div>
  <div class="col-xs-12 col-sm-4">Two</div>
  <div class="col-xs-12 col-sm-4">Three</div>
</div>
<!-- .row's built-in clearfix keeps whatever comes next from wrapping up around these floats -->

Building a TrailMap Trail-Card Grid

The trail listing page shows one panel per row on phones, two per row on tablets, and three per row from the medium breakpoint up:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="panel panel-default">
      <div class="panel-body">Blue Ridge Loop</div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="panel panel-default">
      <div class="panel-body">Sunset Ridge</div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="panel panel-default">
      <div class="panel-body">Cedar Falls Trail</div>
    </div>
  </div>
</div>

col-xs-12 stacks each card full-width on phones, col-sm-6 pairs them two per row on tablets, and col-md-4 fits three per row from medium screens up - all three prefixes stack on the same element because Bootstrap 3's breakpoints apply cumulatively.