CSS media queries make it possible to only apply style rules when a certain condition is true. For responsive designs, the screen width can be used as a condition to evaluate the media queries. A typical media query looks like the following:
@media (min-width: 768px) { //style rules }
The style rules inside the preceding media query will only be applied when the screen's width (viewport) is equal to or wider than 768 pixels.
In this recipe, you will have to use the code from the Building a grid with grid classes recipe of this chapter. You also will have to use the command line Ruby Sass compiler. Read Chapter 1, Getting Started with Sass, to find out how to install Sass on your system.