<div class="sb:grid">
  <h2 class="sb:grid-heading">Bootstrap 3 style grid</h2>
  <div class="row">
    <div class="sb:grid-column col-xs-4">.col-xs-4</div>
    <div class="sb:grid-column col-xs-4">.col-xs-4</div>
    <div class="sb:grid-column col-xs-4">.col-xs-4</div>
  </div>
  <div class="row">
    <div class="sb:grid-column col-xs-2">.col-xs-2</div>
    <div class="sb:grid-column col-xs-8">.col-xs-8</div>
    <div class="sb:grid-column col-xs-2">.col-xs-2</div>
  </div>
  <div class="row">
    <div class="sb:grid-column col-xs-3">.col-xs-3</div>
    <div class="sb:grid-column col-xs-4">.col-xs-4</div>
    <div class="sb:grid-column col-xs-5">.col-xs-5</div>
  </div>
  <h2 class="sb:grid-heading">Responsive columns</h2>
  <div class="sb:grid-breakpoints">
    <h6>Breakpoints:</h6>
    <ul>
      <li>
        <strong>xs</strong>
        : &gt;480px
      </li>
      <li>
        <strong>sm</strong>
        : &gt;768px
      </li>
      <li>
        <strong>md</strong>
        : &gt;992px
      </li>
      <li>
        <strong>lg</strong>
        : &gt;1200px
      </li>
    </ul>
  </div>
  <div class="row">
    <div class="sb:grid-column col-md-4 col-xs-8">.col-md-4 .col-xs-8</div>
    <div class="sb:grid-column col-md-8 col-xs-4">.col-md-8 .col-xs-4</div>
  </div>
  <div class="row">
    <div class="sb:grid-column col-md-6 col-xs-4">.col-md-6 .col-xs-4</div>
    <div class="sb:grid-column col-md-6 col-xs-8">.col-md-6 .col-xs-8</div>
  </div>
  <h2 class="sb:grid-heading">Offset columns</h2>
  <div class="row">
    <div class="sb:grid-column col-xs-4">.col-xs-4</div>
    <div class="sb:grid-column col-xs-offset-2 col-xs-6">
      .col-xs-offset-2 .col-xs-6
    </div>
  </div>
  <div class="row">
    <div class="sb:grid-column col-xs-2">.col-xs-2</div>
    <div class="sb:grid-column col-md-offset-4 col-md-6 col-xs-10">
      .col-md-offset-4 .col-md-6 .col-xs-10
    </div>
  </div>
</div>