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>