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