I’d like to have images and text blocks alternate on desktop (row 1: text left - image right, row 2: image left, text right, etc.), whereas on mobile, I’d like the order to remain the same (row 1: text, row 2:image, row 3: text, row 4: image).
So currently, on desktop, it looks like this, which is how I want it to be:
Design your item (img+text) using flexbox. And make sure there’s only 2 elements inside of your item. Add a class called for example .even to every other item. Then click on the flexbox button with two arrows to invert the order of the flexbox for mobile for .even items.
Would be even easier if it was dynamic content, you could have used the odd/even option for the dynamic item.
Thanks a lot for your help. That seems to work until I get to the mobile landscape view (where I want to adjust the vertical order). There, the flex layout panel with that option disappears because the element becomes a flex child.
Hi Stan, thanks so much for the video and explanation! I’ve tried it out, but when I remove the flex setting from the section, it does affect the layout in the Desktop view.
hi @Carlin_Desautels sorry I have now checked my video library but these videos are gone as I do delete these that are very specific and keeping only global solutions that may help in more situations.
In meantime there are many solved requests about alternating layouts or cloneable projects.
here are two examples:
or use input search field with keywords "alternating layout’ , "alternating grid layout’, “alternating CMS collection items” etc. If these sources will not help you solve your issue you can create a new request to get help.
