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>

Answer 2

将来，您会想要使用Flexbox，这非常适合。但是，它没有得到可靠支持，因此我所知道的最佳选择是使用appendAround jQuery插件根据媒体查询将左列移动到不同的容器div。

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

2 个答案: