How do I create a responsive zigzag layout?

Hi all,
I’m trying to design a marketing site in the popular zigzag layout, meaning sections that looks like that:
text on the left - image on the right,
text on the right - image on the left,
and so on…
When I use 2 columns in the desktop view, I get in the mobile something like this:
text
image
image
text
instead of text, image, text, image… How can I solve this?
Than you, Asaf

Ditch the Row widget (columns) and use Flexbox instead.

Make the layout for your first section, copy it, add an extra class (like “odd”) to every other section, and in the flexbox parameters, click “reverse layout”.

Now for mobile, play with the flexbox parameters to do what you want.

Make sure to play the www.flexboxgame.com to learn about Flexbox and ordering.

1 Like

Fantastic.
Thanks a bunch, @vincent

1 Like

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