base takes care of many mobile cases automatically. marginN classes reset and colN classes adjust to 100% width when viewed in mobile to promote a flat linear list. There are cases however where you want to manage the presentation of items in a mobile context on your own. The following classes can help with this.

.mobile-cols

When added to a parent container any nested colN class retains its original width and overrides the 100% that happens by default. This is particularily useful when there's small number of tabs in a navigation interface.

  <div class='pill col8 margin2 mobile-cols clearfix'>
     <a href='#active1' class='col6 button'>Menu item</a><!--
  --><a href='#active3' class='col6 button'>Menu item</a>
  </div>
  

.show-tablet

Show content only on screens with a max-width of 770px.

.hide-tablet

Hides content on screens with a max-width of 770px.

.show-mobile

Show content only on screens with a max-width of 640px.

.hide-mobile

Hides content on screens with a max-width of 640px.