Responsive Grid

There may be cases where a row of columns will not fit nicely in the available area. The responsive classes can be used to turn each column in a row into its own row at certain breakpoints.

For example, if you want a row of columns to turn in to stacked rows when the viewport is pretty small, you would use the .responsive-sm class. The example to the right is a simulation of what it'd look like.

<divclass="row responsive-sm"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div></div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

For further configuration, each class uses a Sass variable that can be changed to your liking. There's also a responsive-grid-break mixin you can use to create your own classes.