3.4 #Layout.responsive Responsive

Toggle example guides Toggle HTML markup

To create a mobile-first responsive grid you can add different column classes for different viewports. Add sb-col-#{i}, sb-col-s-#{i}, sb-col-m-#{i}, sb-col-l-#{i}, sb-col-xl-#{i} to set the desired column width for extra small (default), small, medium, large and extra large viewports.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

.sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
.sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
.sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
.sb-col-12 .sb-col-s-6 .sb-col-m-12 .sb-col-l-3 .sb-col-xl-2
Markup 
<div class="sb-grid">
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-4 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
  </div>
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-4 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
  </div>
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-4 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
  </div>
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-12 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-12 .sb-col-l-3 .sb-col-xl-2
  </div>
</div>
Source: layout/_layout.scss, line 204