Reverse row elements when responsive changes to mobile

Hi - I’ve searched prior topics on this, but cannot find an update or get what was posted as a solution to reverse elements in a row container a couple years ago to work.

I tried pasting the suggested code into an HTML container to the top of the page and setting the ID Attribute correctly, but it doesn’t work for me.

Are there any updates to this problem?

I am simply trying to reverse two elements in a basic row container when the page width changes to mobile.

For laptop/desktop, I have an image on the left and a text group on the right.
For mobile, I just want them to switch so the image renders below the text instead of above the text.

Thank you!

Maybe List Swapper would help you in this instance? It swaps groups/positioning based on conditionals.

You just need to apply the flex-direction: column-reverse style below a certain screen width.

1 Like

Thanks - I’m not sure how to do that. Forgive me - learning here.

I had tried the conditional on the page width for the original HTML and then plugged in the flex-direction snippet you copied in to replace the wrap-reverse.

Is there an element style for that? I searched for an HTML style.

thanks - this should actually help for something else I wanted to do with randomizing repeating group orders.

Have a look at this example

That worked - thank you!

I’m not sure what the ID Attribute “reverse” does, but doesn’t matter.

I was also placing the HTML at the top of the page like the original example, but yours clarified putting it into the row container itself.

The ID can be anything. It doesn’t have to be “reverse”. What’s important is that the ID of the target element matches the ID referenced in the HTML element

image

Thanks, Alex.

Yes, I’m familiar with how that ID can be any term - but was confused since I could not find the ID Attribute actually assigned to the target element, except for how it’s referenced in the Conditional as you show.

I thought it had to be assigned in at the bottom of the appearance tab, which was blank.

But it works, so I’m glad to learn something new, as I am every day - and thanks again!