Layout field - reordering the grid for mobile breakpoint

The CMS Questions
1

Hi,
when using Layout field I have run into to an issue, when special order of grid is needed for mobile breakpoint. It is quite easy to get there: Let’s have two column grid:

-----------
IMG | TEXT
-----------
TEXT | IMG

So just switching sides for images used to make page look more interesting. Quite regular thing.

On mobile, this would appear as img + text + text + img, but desired order would be img + text, img + text.

Any tip how to reorder layout field for mobile breakpoint and solve his simple situation?

2

Hey,
maybe CSS can solve this for you.
You could add a class to the second row and reorder the content via CSS order inside a Flex container. In this case you don’t need 2 different Layouts.

3

Thanks David. I have solved it for now by adding a setting page for my layouts, where I can choose a „mobile handling“ - and when rendering the layouts I am adding some css classes to handle the mobile order.

However, handling more advanced layouts this way could be quite unfriendly to editors.