Reverse element positions on mobile - Quick tip!

[eli]

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

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

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.

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

Voila! The new responsive behavior for your groups!

Good luck!

Eli

[Christophe_HK]

Great, well done!

[w.fly]

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

[J805]

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

[bubblernz]

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!

[nathanlively]

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

[fernando7]

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

[bestbubbledev]

Where do I set the ID Attribute from? I’ve checked almost everywhere.

[draked123]

Hey @bestbubbledev !

You can set an ID Attribute from the bottom of your Properties page, as shown here:

That option is not there?

No worries. Go to Settings > General > General Appearance > Check the box that says “Expose the option to add an ID attribute to HTML elements”

As shown here:

[bestbubbledev]

@eli

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

Just did that! Thanks. Sadly it doesn’t work for me. What are the standard issues of this thing not working?

[varshneyandson]

@gio.kakhiani
Can you make a copy and share the page and make the editor viewable? That will make it much easier to diagnose the problem.

[xavincent11]

Hi!
Thanks for sharing, it looks perfect, but on my side, it doesn’t work…
I think I’ve reproduced all the step (on a dedicated test page): Tb23 | Bubble Editor
Can you please help find what I’m doing wrong ?
Thanks a lot,
Xavier

[J805]

Hey @xavincent11

I think the issue is that without being on a paid plan, you need to put the code in an HTML element instead. Then it should work on the old responsive engine at least. I haven’t found a way to do this on the new responsive engine yet.

Here is an example:

Editor: Test805421 | Bubble Editor
Preview: Your Bubble app

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

• One-on-One Coaching

• eLearning Hub

• Video Tutorials

• Subscribe to Free Videos on YouTube

[xavincent11]

Thanks! Works perfectly

[eli]

Updated CSS for the new responsive engine:

<style>
#elementContainer {
    flex-direction: column-reverse;
}

#elementContainer > div {
    min-width: 100%!important;    
}
</style>

[boston85719]

@eli

<style>
#elementContainer {
    flex-direction: column-reverse;
}

#elementContainer > div {
    min-width: 100%!important;    
}
</style>

Thanks for posting this update @eli

I was having an issue with it and was not sure what I was doing wrong.

When I don’t have the code on the page I have a preview that looks like this on a device width larger than 1600px.

And when collapsing the page it looks like this. The collapse is as expected since the groups left and right have min width set to 300px each and the page is 599px in the screen shot below (the moment the break lines).

However, if I put the code on the page my preview looks like this on the device width larger than 1600px

I was expecting that utilizing the code wouldn’t force them to break lines immediately and would just reverse their position when the lines break. That was the experience I had with the code you shared for the original responsive engine.

What seems to be happening because of the min-width of 100% setting on the elementcontainer div it is stretching to fit the entire viewport width. Also seems like the new responsive engine is reversing the position immediately.

To fix for this I put a conditional onto my HTML to only use the code after the page width has passed the ‘line-break’ point.

Previously this was not needed. Do you think it is an issue with the new responsive engine that causes it to reverse immediately?

[eli]

Hey Matt,

This is actually correct behavior. Setting the the flex-direction (i.e. column-reverse) will impact the elements regardless of the screen width. In this particular case, it is the same as converting the group layout to ‘column’ at the wider width (which is why the elements are stacking) and reversing them (why the positions are reversed).

When writing CSS you would use media queries to specify which CSS should be used at different screen sizes. We can apply that to this code like this:

<style>
@media only screen and (max-width: 800px) {
    #elementContainer {
        flex-direction: column-reverse;
    }

    #elementContainer > div {
        min-width: 100%!important;    
    }
}
</style> 

The max-width is telling the browser to only use the styling from this CSS code when the page width is < 800px.

Your conditional is a visual alternative to the @media query that would be used in a stylesheet. It all looks good!

[boston85719]

Thanks Eli for that insight. This is definitely going to help me when trying to put together other CSS for use in the new responsive engine.

[Codepuppie]

@eli

<style>
#elementContainer {
    flex-direction: column-reverse;
}

#elementContainer > div {
    min-width: 100%!important;    
}
</style>

I have tried this with the new responsive engine and can’t get it to work. Does anyone have any suggestions or workarounds?

[Codepuppie]

Initially I couldn’t get this to work with the new responsive engine or after upgrading. However, through a process of trial and error I managed to find a solution that worked. But if anyone can shed light on why there is a discrepancy between the responsive editor and rendered page I would love to hear your thoughts.

Here’s a video of the solution and the responsive editor issue [Bubble.io - Reverse element position at break point - VEED].

I would love to hear your thoughts and hope this helps anyone that hasn’t managed to get it working so far.