How to reorder floating divs based on media query?

Question

I am working on a flexible 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, setting all the column widths to 100%.

How can I adjust the display of divs in a different order in a media request?

The divas are based on a fluid grid with twelve columns, with narrow left and right columns and a wide central column. They all float to the left, so they appear in the markup order. But the center column contains the main content, and the left and right columns contain supporting information. So I want the left and right divs to appear below the center div when my layout moves to the same 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 have found a solution for this now.

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

It worked.

Here is 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> 

Answer 2

In the future you will want to use Flexbox , for which this is ideal. However, it is not reliably supported, so the best option I know would be to use the appendAround jQuery plugin to move the left column around various divs containers based on media queries.