How to change placement of block or region on events?

Question

I want to change the placement of 2 regions based on window size. I know that I can print 2 blocks and use css dipslay:none based on window size, but I prefer not to double print a block.

Is there any way I can change the placement of blocks / regions based on events, such as screen size, using JS or similar?

Answer 1

You can use the flexbox order property: https://css-tricks.com/almanac/properties/o/order/

Answer 2

I managed to do this using js $('#source').appendTo('#destination'); I'm not sure if this is the drupalish way to do it? But at least it works!

I found it from this page; https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element