In the preceding examples, you used one grid with one break point. Below the break point, your rows simply stack. This seems to work in many cases, but sometimes, it will be useful to have a grid for small screens as well. Imagine that you build a photo gallery. On large screens, there will be four photos in a row. For smaller screens, the photos shouldn't stack but show up with two instead of four in a row.
Again, you can solve this situation using grid classes or mixins for a more semantic solution.
In both situations, you should also make your photos responsive. You can do this by adding styles for your images. Setting
auto does the trick in most cases. The
max-width variable prevents images ...