Can I change my html/flexbox order for different devices?

I currently have my product page setup to show:

  • Product image > product name, description, etc on the right.

However, when the site is displayed on mobile I’d like the order to switch to:

  • Product name > product image > product description

Is there an easy way to do this that doesn’t involve having different items that display none in mobile, but display block in desktop?

(to display an item page hover over “Shop” in the nav and then go to “Cones”)


Here is my site Read-Only: Papes Website

1 Like

Hello @peej

The first thing that is coming to my mind is to wrap the product image and product name with a div that will have flexbox applied. For mobile you will use reverse and the product name will go first.

Feel free to reach out if you need some help.

The read-only link is not working. Can you try again :blush:

Piter :webflow_heart:

Hey @PeterDimitrov I’ve updated the read-only link, sorry about that!

I’ve currently using flexbox, but maybe not in the way that you’re explaining?

1 Like

I need to go to products template right?

Yes, should be the product template

1 Like

Soooo I think that with the current structure there is now way to just move the heading and the image with the reverse feature. One thing you can try is using grid. With grid you can move things very easily. I can try something with flexbox and share a screen record here.

My idea is having the product image and the product title in a separate div in order to use the reverse option only for them.

1 Like

Hey, that would be awesome! I’ve actually tried using grid in another part of the website but I was struggling to do the same thing! I’m not sure why but I ended up giving up on it.

If you could try something and share a screen capture that would incredibly helpful!

So are you thinking of having the product image in a div, then a div that contains:

  • a div for the heading and a div for all the other product info?
1 Like

Kinda :smile: I will try and share

@peej Let me first show you how to achieve the layout with grid. It’s very easy and you will not need a lot of divs. I’m still thinking on how to make it work with flex :sweat_smile: Because we need to keep the desktop positioning.

@peej Grid link > https://www.useloom.com/share/2c1e928a1f4d4359b0b9ed57b86b73c7 It has some little differences. The heading is not so close to the product description, but I think this can be solved easily.

1 Like

Very, very interesting. I had never played with the “position” settings for the individual object in the grid! That’s super helpful and it seems like a good workaround. It’s unfortunate that it’s a bit tough to get the heading to be spaced correctly on desktop (I saw you messing around with that for a while! haha) but this looks like a good workaround all together.

Thanks!

1 Like