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

我正在处理三列的响应式设计。对于700px以下的屏幕尺寸，这些列按照它们在HTML中显示的顺序跳转到彼此之上：div1，div2，div3，将所有列宽设置为100％。如何根据媒体查询更改浮动div的顺序？

我会如何去设置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; 
} 

}

来源

2012-10-22 jasonbradberry

我现在已经找到了解决方案。

我使用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>

来源

2012-10-25 14:20:55 jasonbradberry

-1

在未来，你要使用Flexbox，这这是一个完美的结合。但是，它不是可靠的支持，所以我知道的最好的选择是使用jQuery插件将左栏移动到基于媒体查询的不同容器div。

来源

2012-10-22 23:17:44

谢谢，会研究appendAround插件。希望避免jquery，如果它以任何方式，但如果需要必须！ – jasonbradberry

不，不太合适，因为* Flexbox仍然存在浏览器兼容性问题*。 Flex非常棒，但对于在不同环境中进行实际工作而言，通常不是一种选择。 – James

@james我不确定你明白“未来”是什么意思。 –

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

回答

相关问题