Presentation of two columns of content to look good in mobile view

[Tierramitica]

Hi, in the first section of my home page I want to display three rows of information. Each row has two columns, one column is an image and one column is text (headlines and text).

For XL, LG and MD screens I want to alternate the position of the image from left to right as you will see if you visit the page. The problem is that for SM and SX (mobile) screen sizes the content is condensed into one column and the ordering of the content no longer makes sense. When displaying the content in one column, the left column is presented on top, and right column on the bottom. This doesn’t look good for row #2 which has an image on the left and the headline and text on the bottom. How can i switch the order of the image vs text only for row #2 so that this content looks good on mobile devices?

the website is www.misfitsunified.com

Thanks

[christian]

Hey Mitica,

The solution to this is to use the New Row element. If you’re not yet aware of it, please check out our intro video about it below.

Because the New Row element has Flex Options, you also need to understand how to use them so I’d recommend that you learn the Flex Options in our documentation here: https://theme.co/docs/use-flex-layout

The key to achieving an alternating column setup is the Reverse Layout Option. You can see that in action in the walkthrough video below. Reduce the speed of the video if it’s too slow and also increase the volume if it’s not audible.

Hope that helps.