Syntax

First, make sure to wrap your columns in a row element. Then specify your columns and stick your content inside. Use the following classes to identify your coloumns: tiny-* small-* medium-* large-*

Each class corresponds to a break point:

Classname in em In px
tiny-* > 0em > 0px
small-* > 48em > 768px
medium-* > 64em > 1.024px
large-* > 75em > 1.200px

This assumes a base fontsize of 16px

* is a number between 1 and 12, where 1 is a single column.


<div class="row">
  <div class="tiny-12">
    This spans 12/12 columns on all screensizes
  </div>
</div>

<div class="row">
  <div class="medium-6">
    This spans 6/12 columns on screens wider then
    the medium breakpoint, but will span 12/12 on smaller screens
  </div>
</div>

<div class="row">
  <div class="small-12 medium-6 large-4">
    This spans 12/12 columns on small screens,
    6/12 on medium screens and 4/4 on large screens
  </div>
</div>
          

Example