Conflict between alternating layout and mobile layout

I’m trying to create an alternating layout on my desktop site - one row has image on the left and text on the right, the next it’s reversed, and so on. So far, so good. But when it comes to the mobile version, with the image and text being stacked instead, I need the image to always be on top of the accompanying text or it just looks weird. However, making this change in mobile seems to cause the change to occur on desktop as well, so that it’s no longer alternating. Is this just not doable? Any help would be GREATLY appreciated.


Here is my site Read-Only:https://preview.webflow.com/preview/nathan-chitayat-6366e4be4-0445f2bd2ff29?utm_medium=preview_link&utm_source=designer&utm_content=nathan-chitayat-6366e4be4-0445f2bd2ff29&preview=ccbd3f0fef6ad004634098ef47f77555&workflow=preview

With Grid layout, you can do it in multiple ways but the main thing is to know how to work with the viewport.

First stay on the Desktop/Base viewpoint and apply how you want it to be.

Inside your grid, select the first DIV and go to Style panel, there is an option for Order select Last . Now your DIV with the image should appear on the right.

Now go to Tablet viewport and on the Order option select First , now your DIV with the image should appear above the content like others.

So the thing is, when you need to style depending on viewport. Styles applied on the Base/Desktop viewport will affect that viewport and above. And styles applied on the Tablet viewport will affect that viewport and below.

1 Like

There are more advance ways to work work with Grid.

You can learn more here