Reverse element positions on mobile - Quick tip!

Tips
26

Perfect

27

Thanks for the tip. I believe there is a more appropriate CSS property to achieve this though.

<style>
#elementContainer {
    flex-wrap:wrap-reverse;
}
</style>

I’ll repeat the whole process for those who haven’t read the other messages:

  1. Add an ID Attibute to the container group, e.g. elementContainer
    (You should be able to set this property at the bottom of the Appearance tab. If you don’t find it Go to Settings > General > General Appearance > Check the box that says “Expose the option to add an ID attribute to HTML elements”)

  2. Add the 5 lines of code above to the page HTML header. Make sure the ID is the same as the ID of your parent group.

The effect of this will not show in the Responsive editor but should work when you test in the browser (it does for me…).

1 Like
28

Hi there,

I’ve got this working - but have an issue on desktop where my right group contents float to the bottom:

Mobile (reversed)

reverse-mobile
reverse-mobile781×613 36 KB

Desktop (correct order, but right column contents float at bottom)

reverse-desktop
reverse-desktop1558×1055 64.4 KB

I believe this has to do with the ‘aligin-self: flex-start;’ styling on the right column - because it’s reversed, start is bottom and end is top. When I modify the CSS in dev tools, it looks correct:
css

desktop-correct
desktop-correct1096×315 28.6 KB

However, when I try add this into the HTML using ID attribute, I can’t get it to work…
css-wrap

right
right385×734 15.8 KB

:frowning:

29

@eli you are a bubble magician - thank you!

Three years into bubbling and I find this. Life changer.