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?


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

  • I think this will only work to reorder blocks within same region, but not so put them into another region. – user11448 Jun 5 '17 at 20:22
  • What I was thinking to suggest this was to arrange the regions themselves. If that is not the case, than it was my misunderstanding :p – Luiz Henrique Guerra Jun 6 '17 at 22:03

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy