Changing HTML (the DOM) on viewport resize

[JohnAsp]

I would like to re-order the HTML structure of my page based on the width of the viewport, upon resize, due to needing to keep certain content blocks at the top of a responsive page

For example, if you look at this new responsive site I am building, I want to move the ‘News Now’ content block to the top of the sidebar when the site breaks from 3 column layout to the 2 column layout. Resize the browser window to see:

[http://v2.seasiderspodcast.co.uk/](http://v2.seasiderspodcast.co.uk/ “Resize this mother”)

I’m noit that clued up on Jquery but I assume this is the best way to do it? If so, what are the pitfalls and how would do it?

Cheers!

[CrocoDillon]

There are css properties (in the flexbox module) to change order of elements. I don’t got any experience there but here is more info: https://css-tricks.com/using-flexbox/

[CrocoDillon]

I made a small jQuery script to change DOM on resize: http://jsfiddle.net/cBkC5/

That’s probably easier than using CSS ;) It can be made more efficient but that only matters if some one resizes like a madman.

[JohnAsp]

Sweet! I shall I have a fiddle to see if I can get it working on my site.

[CrocoDillon]

I decided to make a better looking (and possibly more real life worthy) example on CodePen: http://cdpn.io/xbmgp ;)

[Author]

Posts