The easy way to do this is to add a standard Structure 2 Column bloc to the page - DON’T Confuse it with a Structure Group 2 Bloc. You should now have something like this:
Next, place a 2 column row BRIC into each empty column on the page to get this result:
You’ve now created a pair of nested columns. This will ensure that on narrow devices, the content will be displayed in a two column format instead of one. Basically, the outer columns will stack one above the other at the breakpoint instead of the individual content columns.
For my example, I’m going to use images, but the content could be buttons or anything else you want.
Firstly, I’ll place an image bric into each column and import an image to each. With the images placed, select the first double-column as illustrated below:
Create a custom class and apply a top margin to create the gutter you want between vertical images (usually the same as the horizontal gutters)
Apply the same custom class to the second double column.
When you view on a mobile, it should look like this:
If you want to create another block of images, remove the padding from the bloc and then duplicate the block. Replace the images in the duplicate. You should now have something like this:
Keep duplicating the bloc to add more images.