How to swap blocks in css?

Question

css

This problem has already bothered me personally and I want to find some kind of solution for this.
In general, the point is that there are, for example, 2 float blocks. Let's look at the screenshot.

On the desktop, everything is nishtyak. But on the adaptive, it is required that the second block becomes the first and the first the second. Otherwise, it is not logical that the "more" button comes first and then the text. Well, you understand.

Is there any non-js-but-crutch way to do this? On pure css.

Answer 1

I do it through flexbox order .

Answer 2

Maybe it's just for mobile phones to add a second block with text in front of the button, and through @mediahide or show what you need.

Answer 3

flex is fine, but won't work in io... why not do it like this:

<div>
         <p style="float:right">test</p>
         <button style="float:left">asdasdad</button>
</div>