Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

All you need to remember is row, column, content.

Add any number of auto sizing columns to a row. Let the grid figure it out.

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs"> <div class="col-xs-6"> <div class="box"> start </div> </div> </div>

.center-

<div class="row center-xs"> <div class="col-xs-6"> <div class="box"> start </div> </div> </div>

.end-

<div class="row end-xs"> <div class="col-xs-6"> <div class="box"> end </div> </div> </div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

<div class="row center-xs end-sm start-lg"> <div class="col-xs-6"> <div class="box"> All together now </div> </div> </div>

.top-

<div class="row top-xs"> <div class="col-xs-6"> <div class="box"> top </div> </div> </div>

.middle-

<div class="row middle-xs"> <div class="col-xs-6"> <div class="box"> center </div> </div> </div>

.bottom-