<div class="padding">
  <h6>Stacked-to-horizontal</h6>
  <div class="row">
    <div class="col-md-2"><div class="box p-a">.col-md-2</div></div>
    <div class="col-md-2"><div class="box p-a">.col-md-2</div></div>
    <div class="col-md-2"><div class="box p-a">.col-md-2</div></div>
    <div class="col-md-2"><div class="box p-a">.col-md-2</div></div>
    <div class="col-md-2"><div class="box p-a">.col-md-2</div></div>
    <div class="col-md-2"><div class="box p-a">.col-md-2</div></div>
  </div>
  <div class="row">
    <div class="col-md-8"><div class="box p-a">.col-md-8</div></div>
    <div class="col-md-4"><div class="box p-a">.col-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-md-4"><div class="box p-a">.col-md-4</div></div>
    <div class="col-md-4"><div class="box p-a">.col-md-4</div></div>
    <div class="col-md-4"><div class="box p-a">.col-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-md-6"><div class="box p-a">.col-md-6</div></div>
    <div class="col-md-6"><div class="box p-a">.col-md-6</div></div>
  </div>
  <h6>Mobile and desktop</h6>
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-xs-12 col-md-8"><div class="box p-a">.col-xs-12 .col-md-8</div></div>
    <div class="col-xs-6 col-md-4"><div class="box p-a">.col-xs-6 .col-md-4</div></div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-xs-6 col-md-4"><div class="box p-a">.col-xs-6 .col-md-4</div></div>
    <div class="col-xs-6 col-md-4"><div class="box p-a">.col-xs-6 .col-md-4</div></div>
    <div class="col-xs-6 col-md-4"><div class="box p-a">.col-xs-6 .col-md-4</div></div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-xs-6"><div class="box p-a">.col-xs-6</div></div>
    <div class="col-xs-6"><div class="box p-a">.col-xs-6</div></div>
  </div>

  <h6>Mobile, tablet, desktops</h6>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8"><div class="box p-a">.col-xs-12 .col-sm-6 .col-md-8</div></div>
    <div class="col-xs-6 col-md-4"><div class="box p-a">.col-xs-6 .col-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4"><div class="box p-a">.col-xs-6 .col-sm-4</div></div>
    <div class="col-xs-6 col-sm-4"><div class="box p-a">.col-xs-6 .col-sm-4</div></div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4"><div class="box p-a">.col-xs-6 .col-sm-4</div></div>
  </div>

  <h6>Offsetting columns</h6>
  <div class="row">
    <div class="col-md-4"><div class="box p-a">.col-md-4</div></div>
    <div class="col-md-4 offset-md-4"><div class="box p-a">.col-md-4 .offset-md-4</div></div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3"><div class="box p-a">.col-md-3 .offset-md-3</div></div>
    <div class="col-md-3 offset-md-3"><div class="box p-a">.col-md-3 .offset-md-3</div></div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3"><div class="box p-a">.col-md-6 .offset-md-3</div></div>
  </div>
  
  <h6>Column ordering</h6>
  <div class="row">
    <div class="col-md-9 push-md-3"><div class="box p-a">.col-md-9 .push-md-3</div></div>
    <div class="col-md-3 pull-md-9"><div class="box p-a">.col-md-3 .pull-md-9</div></div>
  </div>

  <h6>Grid options</h6>
  <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
  <div class="table-responsive box">
    <table class="table table-striped white">
      <thead>
        <tr>
          <th></th>
          <th>
            Extra small devices
            <small>Phones (&lt;33.9em)</small>
          </th>
          <th>
            Small devices
            <small>Tablets (≥34em)</small>
          </th>
          <th>
            Medium devices
            <small>Desktops (≥48em)</small>
          </th>
          <th>
            Large devices
            <small>Desktops (≥62em)</small>
          </th>
          <th>
            Extra large devices
            <small>Desktops (≥75em)</small>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="text-nowrap">Grid behavior</th>
          <td>Horizontal at all times</td>
          <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
        </tr>
        <tr>
          <th class="text-nowrap">Container width</th>
          <td>34rem</td>
          <td>45rem</td>
          <td>60rem</td>
          <td>72.25rem</td>
          <td>72.25rem</td>
        </tr>
        <tr>
          <th class="text-nowrap">Class prefix</th>
          <td><code>.col-xs-</code></td>
          <td><code>.col-sm-</code></td>
          <td><code>.col-md-</code></td>
          <td><code>.col-lg-</code></td>
          <td><code>.col-xl-</code></td>
        </tr>
        <tr>
          <th class="text-nowrap"># of columns</th>
          <td colspan="5">12</td>
        </tr>
        <tr>
          <th class="text-nowrap">Gutter width</th>
          <td colspan="5">1.875rem</td>
        </tr>
        <tr>
          <th class="text-nowrap">Nestable</th>
          <td colspan="5">Yes</td>
        </tr>
        <tr>
          <th class="text-nowrap">Offsets</th>
          <td colspan="5">Yes</td>
        </tr>
        <tr>
          <th class="text-nowrap">Column ordering</th>
          <td colspan="5">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
