Streaming live at 10am (PST)

Alternate text and images on desktop, but keep same order on mobile?

Hi everyone,

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:

But on mobile, I want the image to move below the text, as per the red arrow:

Here’s the preview link for the site I’m creating.

Let me know if this can be done. Thanks in advance for your help!

Tim


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

As it’s static content:

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.

Hi Vincent,

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.

Desktop:

Tablet:

Mobile landscape:

Mobile portrait:

Let me know if you have a way to resolve this. Thanks!
Tim

hi @Tim_Metz here is short video what @vincent was explaining to you and it doesn’t work because of one small thing you did not make correctly.

2 Likes

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.

I’ve recorded a short video here:

hi @Tim_Metz here is how to :wink:

1 Like

Thanks Stan, this was perfect. All fixed now! :pray:

1 Like