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
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.
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!
@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 Because we need to keep the desktop positioning.
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.