Get a free trial // Grow your CSS skills // Land your dream job

Changing HTML (the DOM) on viewport resize

  • # April 17, 2013 at 5:38 am

    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:

    []( “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?


    # April 17, 2013 at 6:57 am

    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:

    # April 17, 2013 at 7:17 am

    I made a small jQuery script to change DOM on resize:

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

    # April 17, 2013 at 7:55 am

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

    # April 17, 2013 at 11:13 am

    I decided to make a better looking (and possibly more real life worthy) example on CodePen: ;)

    # April 17, 2013 at 11:36 am

    Forked @CrocoDillon‘s pen using `display: table-header-group;` to reorder the elements without js.

    _side note_: if you just want to move the “News Now” module above the sidebar, @CrocoDillon‘s js solution is definitely better

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed