Re-Arrange columns on smaller breakpoints

[rafalkukla]

Hi Folks,

I’m looking for a solution so the content folding is a bit consistent, and I’m wondering if you could give me some directions, let me explain.

At the moment, if you have 50%50 split in ROW, Image on the left (Column 1) and text on the right (column 2)
When you have breakpoint to a single row column on smaller screens, Column 1 will be on top column 2, works as expected, however if you would like to duplicate this row, and revert that order, you have text on the left (column 1) and image on the right (column 2) what you would see is this:

row1
Image (column 1)
Text (column2)
row2
Text (column 1)
Image (column 2)

So you end up having text columns one under each other, then 2x images under each other and so on.

What I would like to do is to have consistent swap where Text will be folding above the image on smaller screens, but keeping that effect on larger displays.

Any tips on this?

[rafalkukla]

I think I just found solution! As always, after posting a question.

For anyone who would like this effect on larger screens and have consistent folding on smaller screens, where text always goes above the image, make sure your text is always on column 1, and use ROW settings “reverse” on every second row.

That’s how I got my setup
Image - text
text - Image
Image - text
text - Image

Hope make sense.
learning something new every day!

[lely]

Hi @rafalkukla,

Glad you have found the solution. Here’s a detailed guide on how to do it:

Please subscribe to our youtube channel for more trip and tricks on development.

[rafalkukla]

Hi Lely,
I’m subscribed, but I must have missed this video! I’m glad you’ve covered it, thank you.

[ruenel]

Hey ForgetWP,

You are most welcome!
We’re glad @Lely were able to help you out.

Cheers.