Moving divs between parent divs based on screen size display:none a bad idea?

Question

I have a bunch of divs in a webpage that need to be moved to completely different parent divs based on screen size.

At the moment I am repeating the divs and setting the display property to either none or block etc based on screen size.

First question is is there a better way to do this using html or css only?

Secondly does the display:none allow use of duplicate div id's or is that just plain bad coding?

thanks

Answer 1

You can use Flexbox's flex-flow to move elements and content around with HTML. I'm not sure about browser support though. A JavaScript solution would be better in this case.

As for your second question, duplicate IDs isn't a CSS problem, it's an HTML problem. It's not allowed whether you use CSS or not. So no, don't do it.