How to align containers dynamically ❔

Question

I need help in creating a rule that determines how (in which order) my containers are displayed on the website.

If 100% width of the screen is = 993px or higher, then my 3 containers (m1, m2, m3) should be displayed inline block (as in the example).

But if it is <= 992px, then the containers should be displayed one below the other (as in the example).
The order must be: m2, m1, m3 and with width = 100% in that case.

How can I make sure that this is going to work?

https://code.sololearn.com/W1WXX4s84H43/?ref=app

Answer 1

Here is the solution. I hope it is good.

https://code.sololearn.com/WKZ9W4PG8CMP/?ref=app

Answer 2

Check out CSS media queries, they allow you to set your rules differently for different screen sizes.