Row Block Mobile Collapse Issue

[thedetoureffect]

thedetoureffect

October 19, 2022 at 3:09 pm

Hi there,

I have a page with nothing on it except a Row block with 3 columns. Each column has an image block in it. Since there are five images, two of them have to go below the other two, like this:

A B C
D E

When it collapses on mobile I want it to maintain the order, so it looks like this:

A
B
C
D
E

But instead, it’s going:

A
D
B
E
C

I tried both the “left to right” collapse order and the “right to left” collapse order but neither of them work because the problem isn’t left/right, it’s up/down. Is there a way to fix this?

I tried just doing two separate row blocks instead. Top row has ABC, separate row below it has DE. But for some reason none of the images are lining up when I do this, image D wants to ride the border of the page instead of sitting directly below image A, like this:

A B C
D E

Even though all of the settings are exactly the same for both rows and the images are the same size. So I’d rather keep one row block so they’re all properly lined up, and figure out the collapse order issue.

In the screenshot attached you can see why they need to be in this order, they are chronologically dated. My website is TheDetourEffect.com and the page is password protected.

Thank you!