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:
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).
