I think this is a small misunderstanding or expectation of what CSS styles have the capacity to do. I could also be seriously ignorant about how they work in the rest of the world, but I think this is how they work in Webflow from experimentation:
A media query / breakpoint only affects the style attributes of an element as they are solely driven by and alter the CSS. A media query cannot dictate element order or page flow as that is driven by the HTML.
The only real exception that I am aware of are manipulations using floats. Specifically, where an element with a float right will break the dictates of normal pageflow, allowing you to display it right to left on one media breakpoint and then cause those elements combined widths to exceed the parent container or page width causing them to stack at another breakpoint. In that case, when those elements stack, the natural html element order prevails and dictates page page flow rather than the float.
To accomplish what you are wanting otherwise you would probably have to duplicate one of the elements so it appears both before and after the alternating element and then toggle visibility at the device breakpoint through display hidden or using Webflows built in device visibility classes (which are amazingly convenient global super classes that can be appended discretely to any element regardless of its class name or structure).
Sorry if this sounds really cryptic or vague - that is why I am not allowed to write tutorials ;).
@cyberdave, @thewonglv - It would be super enlightening and helpful to have a clear example tutorial - a mini primer on media queries, inheritance and cascade and how it ultimately affects page flow. This was a hurdle for me personally early on and took a bit of time to sort. It wasn’t until I started deeply spelunking the code that I really began to realize how elegant and simple Webflow makes those tremendous things just work. If anything, understanding just make you appreciate how well thought out, powerful and accessible Webflow really is. Think about it, and if I can lend a hand in making something simple - deeply complicated and painful let me know - it is where I shine
Hi @domo, sorry for the late reply. I made this one cloneable, thought it was already.
It is such a simple (and slightly mind bendy) slight of hand trick with floats that it is really super easy to miss.
I am swapping the content order of the elements on the second row - super important - (look at the Navigator)
With them swapped, desktop and tablet uses the float behavior, the right pane is first in the content order, but the float right overrides this natural order.
Then content order determines the sequence on mobile media queries once you make the divs 100% wide as the 100% width overrides the available span for the float behavior to exist.
The parts you are missing are:
the page order of the elements on row 2 (where this method is employed) they should be swapped of the natural sequence.
you need to set a the divs with the classes “left” and “right” to 100% width for the content order and natural flow to override the float for the phone media queries.
It is a very powerful little trick once you experience the pain of wrapping your head around how floats affect content flow. There are some great articles on the web, but for me, a little quick experimentation and observation in Webflow is hands down the best educational tool I know of. It has dramatically sped up the process for me allowing me to instantly discover how things work hands on.
Happy to help if you get stuck. Hopefully the clone will make everything clear. Look at it closely in the Navigator pane and I think it will all make sense.