Column Reverse

Support
#1

Need a little help on a column reverse. I need every other row on this page to reverse columns when going to mobile.

http://retro.piexec.biz/services-care/

Thanks in advance!

#2

Hello There,

Thanks for posting in!

The text, image layout is possible on smaller screen. Simply do this approach by having your column layout the same as the first row. The only difference is that on the left column in your second row, you need to add a custom right class and also an inline css margin-right: 0;. Please the screenshot below:

This setup will make sure that on large screens, you will have image text and text image layout but on smaller screen, you will just have text image and text image.

Hope this would help. Please let us know how it goes.

#3

I don’t think that’s going to accomplish what I want. What I want is when mobile, for the images not to stack on top of each other, rather they be separated (or columns reversed) so that each section has an image on top.

#4

Hello There,

That is the only you can reverse the order in mobile. In a simple explanation, to reverse the columns in smaller devices, you will need to create them image column - text column order and then apply the solution I gave in the previous reply. If you would me to give you an example in your site, I would be happy to show you how.

Thank you in advance.

#5

If you could create an example that would be great.

#6

Hello There,

Could you please provide us access to your site?

I have tried this information in the secure note and it is no longer working.

Thanks.

#7

Try it now. http://retro.piexec.biz/wp-admin

#8

Hello There,

I was able to login and created a test page. It turns out that my suggested solution is not working for you because you are using marginless columns set up.

You can check out my test page with no margin less set up.
http://retro.piexec.biz/an-x-test/

It is impossible to reverse the order of the columns when you are using the marginless columns option. It is because because the marginless columns uses the table layout and the table cells can not be reverse.

Hope this explains it briefly.

#9

How about this article. Says it can be done. I just can’t figure out how.

#10

Hi,

There is another option to achieve this.

You can try using the visibility options.

Create two rows with image on the left and text on the right and another row with the same text on the left and the same image on the right.

Then set the visiblity of the first row to be visible only on desktop and the other row to be visible only on mobile.

The visibility option for row element is located under customize tab

I created a sample page for you to check

http://retro.piexec.biz/support-test/

Hope that helps.

#11

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