In a mobile context, you'll (probably) want less columns and a smaller gutter spacing. The most important part, however, is the "media" setting in this example: we feed it with a simple media query - and the grid will only be used when that media query becomes true.
Let's put this new grid to use, for example for our teaser--top element in _layout.scss:
We use the grid-media mixin and simply provide the configuration of our new "mobile" grid. Any declarations in that scope will only take effect when that grid's media query is true. (In our example: when the screen is less than 480 pixels wide.)
We can then use a grid with only 4 columns and a smaller gutter spacing in our grid-* mixin calls.
After using the grid-media mixin like this in a couple of places, this is what we end up with: