Column-reverse

I have a row with 4 sections. There is a picture with text underneath. In the mobile version, the text should be above the picture. I set up a flexbox with column reverse. But it doesn’t work.

Hi @mb_systems,

Thanks for reaching out!

The direction property is just working fine. Source order stays the same when it goes to one column. The reversing only works in the direction of the main axis. So if the direction is row , reversing only works on the main axis. Once it collapses to one column , that’s working on the cross axis .

It was properly explained on the link below with some examples.

Hope that helps.

OK. Thanks very much. So there is no way to switch. Too bad.

Hi @mb_systems,

There’s an option to switch it on mobile, please check the video because there’s a trick on how you can achieve it.

Thank you.

I did it like in the video. But it doesn’t work.

Hey @mb_systems,

In that case, please give us the URL where we could see the issue so we could see the actual structure of the columns and that might lead us to see why it’s not working.

Thanks.

https://hensel.art/work

Hi @mb_systems,

I check the structure of the columns and to achieve your column reverse for your image and text in mobile view, you should enable direction reserve of your column in the mobile. To do that, please follow the details below.

Your section structure should look like this:

Then to make the text above the picture in the mobile version, you should enable the direction reserve in your column on the mobile view.

Please see the secure note for the example page I have made. I also highly advise that you check this responsive styling video for future preference.

Hope that helps.

Yes Perfect. It works now. Super simple explanation. Thank you very much for the help.

Hi @mb_systems,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.