Forum Academy Marketplace Showcase Pricing Features

Reverse element positions on mobile - Quick tip!

Have you ever set up a design like this in the editor where you want the #2 content to show on the right in Desktop view but then have it show on top in Mobile view?

The normal behavior you’ll get from Bubble (as shown below) is typically what you need. But how can you change this behavior when you really need to reverse the element positions on the small screen?

One way to change this behavior is to add another element with the content of group 2 and use conditionals to hide/show the correct group based on screen size. But then you have to maintain two identical elements which can be a pain :hot_face:

Fortunately, it can be easier than that! Here’s how :slight_smile:

Step 1 - Make sure the #1 and #2 groups are grouped together and nested inside a single parent group.

Step 2 - Add a unique ID to the ID Attribute property in the parent group’s property editor.

Screen Shot 2020-10-31 at 2.31.01 PM

Step 3 - Add the following code to the page HTML header. Make sure the ID is the same as the ID of your parent group!

<style> 
#elementContainer {
display: flex;
flex-direction: column-reverse;
justify-content: center;
}            
</style>

That’ll look like this in the property editor for the page

Screen Shot 2020-10-31 at 2.31.52 PM

Voila! The new responsive behavior for your groups!

Good luck!

Eli

15 Likes

Great, well done!

1 Like

Funny, I’ve been wondering how to do this for months now. Great tip @eli!!

Little bits of code that make life easier. Thanks for sharing.

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

Hi Eli

Great tip! Do you have any idea how to do this with 3 items - specially the problem is that the 3 items must transition from being on the same row to being in a single column at the same instant.

Bubble’s native behaviour appears to be that the last element will move to the next row, then as the screen is resized, the 2nd element will move to the next row, pushing the last element to the 3rd row.

I’m instead looking for something like this. Can the CSS be adapted?
https://www.w3schools.com/code/tryit.asp?filename=GLL9WXIS4DVQ

Thanks in advance!

1 Like

I worked! I screwed it up the first time because I put the ID on group #1, not the parent.

I’ve tried this multiple times, but it hasn’t been working for me.

  1. I’ve grouped items #1 and #2 together and nested inside a single group
  2. I’ve added a unique ID to the attribute property to the parent group
  3. added the page HTML header in the current page

Not sure what am I missing…? Thanks