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)