Responsive grid layout issue

https://preview.webflow.com/preview/marketingmatters2?utm_medium=preview_link&utm_source=dashboard&utm_content=marketingmatters2&preview=8e8a9cde734a09777a13aa19fd2aa73a&mode=preview

Hi,

I am having a layout issue with a grid at mobile view.The grid is on this page https://marketingmatters2.webflow.io/automotive and shows three steps. The positions of image and text alternate with each row. However, when seen at mobile view this becomes a bit of a mess with image followed by text then text again then image etc.

I have tried moving the content to different grid cells but this then effects the desktop view. I could hide the section and make another one for mobile view but I imagine this would cause problems when updating through CMS.

Thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Dave,

When using Grid to position elements in a specific order, you need to use the ‘manual’ setting (within the grid) to assign a specific element to a specific Grid location.

If you don’t do the manual override grid will automatically place the elements in the order that they are in the elements panel (DOM)

See image attached.

Hope that helps, call out of you need more help.
Keiran