Skip to content

The "Normal" Way

In this example, I have 6 Photo modules. My crazy cat-lady client insists on having 3 images in each row for large devices. But for medium devices, my client wants only 2 images per row, creating 3 rows. And on small devices, only 1 image per row, creating 6 rows. So logic would dictate that in my responsive column settings, I should set a width of 33.33% for each of my 3 columns on large devices, 50% width (2 columns) for medium, and 100% width (1 column) for small.

However, there's a problem. The 3 images in the top row are all part of the same column group. The second set of images are also in their own column group. The problem is that on a medium device, the last image of the first group doesn't want to share its row with the first image of the 2nd group. So that's why the 3rd and 6th images appear by themselves when you shrink your browser width down to the medium width threshold. (in this case, between 769px and 992px)

1
2
3
4
5
6

The "BB Flexbox" Way

In comes BB Flexbox to save the day! Since all 6 of these Photo modules are technically inside 1 Beaver Builder column, there are no column groups to worry about. The flexbox magic simply takes care of everything. It looks good on all devices and crazy cat-lady client is pleased.

1
2
3
4
5
6
QR Code Business Card