Put right element on top of left element in mobile responsive view

Hi there,

When I have two group elements next to each other on wide screen view. Is it possible to have the responsiveness engine placing the right element on top of the left element in mobile view?

Just like bootstrap is having push and pull on cols and in newer version row reverse?

Thanks!

1 Like

Thank but that not what I meant. Please look at the images below

This is my wide view. Company details at the right. Content on te left

In mobile this is the result:

But I want it like this on mobile:

oh you mean “above” i think it will always be left because of how its rendered… i will recreate and try find a solution later, maybe you could use css float

Yes that wat I mean :-). Would be cool to be able to control the order or stacking of the child groups within the parent group in responsive mode.

i tried for a bit im not sure how to do it, why not just have the profile group on the left, seems more appropriate anyway.

I have the same issue. @eve Can we control the positioning? It’s really important and a must-have feature in my opinion.

1 Like

I’d appreciate this option as well.

Anyone with a solution for this?

I was facing the same issue. Tried increasingly complicated hacks without success for nearly an hour, but ended up with the much simpler and obvious hack that I was hoping to avoid, which is to add some page height, duplicate the block I wanted to flip on mobile immediately below the original block, flip the left and right sides of the duplicated block, and then use responsive hiding rules to hide one block or the other (and made sure I clicked collapse height when hidden for both versions of the block) depending on parent width. Here’s the result (ignore my page ugliness as I had to zoom out to 33% to capture the gif) … you’re looking at the section with the blue background which starts with image on left and text on right, but on narrow screen shows text on top and image on bottom:

mobile-right-over-left-switch

3 Likes

Nice but what do you mean with flip the side left/right sides of the duplicated block?

e.g., this is what it looks like in my editor. Top is desktop view (hidden on narrow screens), bottom is mobile view (hidden on desktop screens) … annoying to maintain, but invisible to users:

1 Like

Ok! As simple as that, but true that this shouldn’t be necessary. Hope a feature for will get to the platform in the near future.

I just had the same issue. Here is how I resolved it.

Let’s imagine I have a red group that contains 2 elements: green and violet.
I want the violet element to be above the green one on mobile.

  1. Add a class name for the red container:

  2. Add CSS using HTML element:

  3. Result:

Hope it’s helpful :slight_smile:

1 Like

There is another way with CSS that was shared on the forum in the past.

I use this often in various situations to get the exact mobile design I want.

2 Likes

Nice, I’m trying to use it with a condition but the addClass does not seem to work, do you know if there is an issue when using it with a condition?

No, there shouldn’t be an issue, except you might need to install the classify plugin to use the addClass

1 Like

I have a workaround.

  • Create reusable elements
  • Create two containers
  • Switch groups on mobile view using the responsive editor! :wink:
1 Like

Indeed 2 things had to be done

  • install classify (obviously :sweat_smile: )
  • !important display:

thank you so much!

I finally used this as I already had this solution for right/left alternance but was too dumb to add a width condition to it :sweat_smile: thank you for sharing the idea

1 Like