如何根据媒体查询更改浮动div的顺序？

Question

我正在开发一个有三列的响应式设计.对于700px以下的屏幕尺寸,通过将所有列宽设置为100%,列按照它们在HTML:div1,div2和div3中出现的顺序跳转到彼此的顶部.

我如何设置div以在媒体查询中以不同的顺序显示？

div基于流体十二列网格,左右列窄,中央列宽.它们全部浮动,因此以标记顺序显示.但是中央列包含主要内容,左侧和右侧列包含支持信息.因此,一旦我的布局移动到单列,我希望左右div显示在中央div下方.我接近这个错吗？

这是标记......

<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

我现在找到了解决方案.

我用enquire.js模拟在JavaScript媒体查询,然后使用jQuery的.insertBefore()和.insertAfter()来切换的div的顺序.

这是一种享受.

这是代码:

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