Reorder items on mobile view

Design help General
1

Hi everyone!

On my portfolio page in desktop, tablet and mobile landscape view, each section is offset from the section before it. In the first section, the Picture is on the right, with the description on the left. In the second section, the picture is on the left with the description on the right.

When I switch to mobile portrait view, however, this creates a problem; since everything gets stacked in a single column, the elements in each section are put in a different order than the previous section. I’d like to reorder the elements so that they all follow the order of Title, picture, description within each section. Is there a way to do that? I’ve googled it and haven’t been able to sort it out. Public share link and live site link below.

Thank you!

Brique

Here is my public share link: https://preview.webflow.com/preview/brevityinspired?preview=8c9c94f05b614e62f3476708e0316d82

The live site is www.brevityinspired.com

2

Next time you put an odd/even lines layout in place, remember that the ROW element can be problematic for the reason you explain above.

What’s great to use in this case is Flexbox, as you can Revert the order of items inside of a Flexbox.

What’s cool here is that even if the Row component is a preconfigured Webflow component, you can still apply Flexbox to it and override the preconfiguration.

Select your Row elements and pass them to Flexbox. Only click on Felxbox, leave the rest unchanged. Do that for the first Row element and call the class .ro-even, do that on the second and call the class row-odd, then repeat, one even, one odd, until the end of the list of sections.

http://vincent.polenordstudio.fr/snap/r61nk.jpg

And now just notice how you can revert the order of the content (you can also specify specific orders for items, but we don’t need that here).

http://vincent.polenordstudio.fr/snap/oae4y.jpg

Cancel that change and head to the mobile view.

The first thing is to reproduce the vertical stacking that we lost from Row settings. Apply vertical for mobile, on the Flexbox settings.

http://vincent.polenordstudio.fr/snap/zk9l4.jpg

Now use Revert on the Rows of odd lines.

http://vincent.polenordstudio.fr/snap/n4ln4.jpg

You’ll have to adjust the space between images and text, but there you go.

1 Like
3

If you want to become a living god of Flexbox, you should play this game: https://www.flexboxgame.com/ :slight_smile:

1 Like
4

WOW. Your reply was both quick and VERY helpful! Thank you so much!

Applying the flex box definitely cleaned things up a lot. As a follow-up, if I want to reorder it in phone-portrait so it’s Header, then image, then text, is there a way to do that?