In the examples in the preceding section, 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 would be useful to have a grid for small screens as well. Imagine you build a photo gallery. On large screens, there will be four photos in a row. But for smaller screens, you don't want the photos to stack; they should be visible as two photos instead of four in a row.
Again, you can resolve this situation by using the 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 max-width to 100% and height to auto does the trick in most cases. The max-width variable prevents images from being displayed wider than their original size, and it also ensures that they get 100 percent of their parent's width in other situations. On small screens, these images will get 100 percent width...
