This simple recipe showcases several important concepts. For example, we can add a div with an arbitrary number of columns by adding it a class of col-*, where the asterisk can be replaced with any number we desire. In our example, it was 7, but it can be anything from 1 to 12.
Secondly, to overcome weird flex-wrapping on smaller resolutions, we added a breakpoint to our seven-column div so that it kicks in at the sm resolutions, and, consequently, since Bootstrap is mobile first, works the same on all the higher resolutions.
However, on resolutions smaller than sm, we added another class, the class of col-12. This class allows our div to span the full width of the available screen on these narrow viewports.
At resolutions between ...
