How to delay responsive resizing on certain elements? (With video)

I have 3 text elements in a row:

I want ‘Text 2’ to be above ‘Text 3’ on mobile, and that’s working nicely:

But it happens too soon. As soon as the page width is narrowed from its default 960px, ‘Text 2’ moves above ‘Text 3’. I understand why that’s happening, but I don’t know how to fix it. What I want is for ‘Text 1’ to decrease in width until it gets to its minimum width, and only then do I want ‘Text 2’ to move above ‘Text 3’. Make sense? So at a width of, say, 700px, it should still be 3 in a row rather than stacked, but right now it’s stacked:

Is it possible to do what I want? Thanks!

Editor: phil-testing | Bubble Editor


Hey @philnauta,

Try setting the group containing text 2 and text 3 (Group C) to fixed width.

EDIT: Sorry, missed the part about keep the wrap of 2 and 3.

I’m still struggling with this. @Bubble, is what I want to do possible?

Hey Phil, did you have any luck in getting this sorted? I am struggling with a similar issue and curious if you managed to find a work-around.

This may or may not work for you – I found a workaround for what I needed, namely, I split the page into a desktop version (where the width bounces between 100% max and 99% min, so it looks quite good anyway) and a mobile version, which starts as a larger % of the page vs the desktop and shrinks down to the smallest mobile pixel size (in my case it’s 300px for the item to show nicely on 320px).

No, I worked with Neerja and she said it’s not supported, or rather: "This might require some manipulation that is not an official solution.’

Interesting idea, thanks for sharing.