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

Question

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;
}

}

Answer 1

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>