Grid

<div class="row">
  <div class="col-sm-12 col-md-6">
  </div>
  <div class="col-sm-12 col-md-6">
  </div>
</div>

Do: You can radically change the layout of your content for different displays. Laying out your content vertically in .col-sm-12s for small devices and then compacting it to .col-md-6s for medium displays is pretty common. If your columns exceed a total size of 12 on some displays, they will wrap accordingly, so do not worry.

<div class="row">
  <div class="col-sm col-lg-3">
  </div>
  <div class="col-sm-6 col-md-8">
  </div>
</div>

Do: Specify only the screen-specific column sizes that you need. You can omit the medium-sized screens' size from a column if its layout on smaller screens is fluid or should be the same as in medium-sized displays. Or, if your larger screen layout is the same as your medium-sized screen layout, you can omit the class for the larger screen.

<div class="row cols-sm-12 cols-md-6">
  <div>
    <p>col-sm-12, col-md-6</p>
  </div>
  <div>
    <p>col-sm-12, col-md-6</p>
  </div>
</div>

Do: You can add multiple predefined layout classes for different screen sizes, allowing you to build responsive predefined layouts.

<div class="row cols-sm-6">
  <div class="row cols-sm-7">
    <p>col-sm-6</p>
  </div>
  <div class="row cols-sm-5">
    <p>col-sm-6</p>
  </div>
</div>

Don't: Avoid using the normal column classes in conjunction with predefined layouts, as they will most likely not apply and can sometimes cause unexpected behavior.

<div class="row">
  <div class="col-sm col-md-offset-1 col-md-5 col-lg-4">
  </div>
  <div class="col-sm col-md-5 col-lg-4 col-lg-offset-2">
  </div>
</div>

Do: You can specify offset classes when you need them and omit them otherwise. This means that, if you want to offset a column only on a medium-sized or a larger screen, you can just specify the offset for that specific screen. Specifying an offset for a smaller screen, however, will apply it to medium-sized and larger screens as well, medium-sized screen offsets will apply to larger screens etc. similar to how the layout system works.

<div class="row">
  <div class="col-sm col-md-10 col-offset-1 col-lg col-lg-offset-0">
  </div>
</div>

Do: To remove a previously applied offset from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no offsets are active on a column, you can use the .col-SCR_SZ-offset-0 class, replacing SCR_SZ with the desired screen size, effectively resetting all offsets.

<div class="row">
  <div class="col-sm col-md-last">
  </div>
  <div class="col-sm col-md-last">
  </div>
  <div class="col-sm">
  </div>
</div>

Do: You can use multiple .col-SCR_SZ-firsts and .col-SCR_SZ-lasts, replacing SCR_SZ with the desired screen size, in the same row for the same screen size. If you specify more than one column to be first or last, the columns with the same order will be placed at the beggining or end of the row and the order between them will be determined based on their order of appearance in the DOM tree afterwards.

<div class="row">
  <div class="col-sm-last col-md-normal">
  </div>
  <div class="col-sm">
  </div>
</div>

Do: To remove a previously applied reorder from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no reordering is active on a column, you can use the .col-SCR_SZ-normal class, replacing SCR_SZ with the desired screen size, effectively resetting all reorders. You do not, however, need to add this class to all other columns or use it when there are no reorders applied.

<div class="row">
  <div class="col-sm-1 col-md-2 col-lg-3">
    <img src="...">
  </div>
  <div class="col-sm-11 col-md-10 col-lg-9">
    <h2>Media object heading</h2>
    <p>Media object content...</p>
  </div>
</div>

Do: You can make your media object responsive, by adding screen-specific layout classes to its columns.

<div class="row">
  <div class="col-sm-1 col-sm-last">
    <img src="...">
  </div>
  <div class="col-sm">
    <h2>Media object heading</h2>
    <p>Media object content...</p>
  </div>
</div>

Do: You can align the media object's content to the left of the image (instead of the other way round), using the .col-SCR_SZ-normal class, replacing SCR_SZ with the desired screen size.

<div class="row">
  <div class="col-sm-2">
    <img src="...">
  </div>
  <div class="col-sm">
    <div class="row">
      <div class="col-sm">
        <h2>Parent media object</h2>
        <p>Parent media object content...</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <img src="...">
      </div>
      <div class="col-sm">
        <h2>Child media object</h2>
        <p>Child media object content...</p>
      </div>
    </div>
  </div>
</div>

Do: Media objects can be easily nested. You can use .row elements in the content column of the media object to make everything align perfectly.

<div class="row">
  <img src="..." class="col-sm-1">
  <div class="col-sm">
    <h2>Media object heading</h2>
    <p>Media object content...</p>
  </div>
</div>

Don't: Do not apply a column class directly to the media element (e.g.<img>) or the content of the media object, as this can cause problems with certain elements. Wrap your media objects columns in <div> elements and apply the grid classes to them, instead.