How to change order of floated divs based on media query?

css, media-queries, responsive-design

Solution

I've found a solution to this now.

I used enquire.js to simulate media queries in javascript, and then used jQuery .insertBefore() and .insertAfter() to switch the order of the divs.

This worked a treat.

Here's the code:

<div class="container">
    <div class="row">
        <div class="threecol" id="tertiary-col">
            <p>Column 1</p>
        </div>
        <div class="sixcol" id="main-col">
            <p>Column 3</p>
        </div>
        <div class="threecol last" id="secondary-col">
            <p>Column 3</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    enquire.register("screen and (max-width:850px)", {
        match : function() { 
                $('#tertiary-col').insertAfter('#secondary-col');
        },
        unmatch : function() {
                $('#tertiary-col').insertBefore('#main-col');
        }
    }).listen();
</script>

Problem

I'm working on a responsive design with three columns. For screen sizes under 700px, the columns jump to sit on top of each other, in the order they appear in the HTML: div1, div2 then div3, by setting all column widths to 100%. How would I go about setting the divs to display in a different order in the media query? The divs are based on a fluid twelve column grid, with narrow left and right columns and a wide central column. They're all floated left, so show in markup order. But the central column contains the main content, and the left and right columns contain supporting info. So I want the left and right divs to show below the central div once my layout moves to single column. Am I approaching this wrong? Here's the markup... ``` <div class="container"> <div class="row"> <div class="threecol"> <p>Column 1</p> </div> <div class="sixcol"> <p>Column 3</p> </div> <div class="threecol last"> <p>Column 3</p> </div> /div> </div> .row { width: 100%; max-width: 1140px; min-width: 701px; margin: 0 auto; overflow: hidden; } .threecol, .fourcol { margin-right: 3.8%; float: left; min-height: 1px; } .row .threecol { width: 22.05%; } .row .fourcol { width: 30.75%; } .last { margin-right: 0px; } @media handheld, only screen and (max-width: 700px) { .row, body, .container { width: 100%; min-width: 0; } .row .threecol, .row .fourcol { width: auto; float: none; } } ```

Original source