CSS 响应式设计，如何更改 div 容器的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12844018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Design, how to change order from div containers?
提问by Luka
I am just starting with responsive webdesign. I have a 2 column layout (sidebar and content).
我刚刚开始使用响应式网页设计。我有一个 2 列布局（侧边栏和内容）。
<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
The content got 2 div container. On a small screen I want
内容有 2 个 div 容器。在我想要的小屏幕上
Div1
Div1
Div2
Div2
On a large screen I want them swapped,
在大屏幕上我希望它们交换，
Div2
Div2
Div1
Div1
In my CSS I now got the following Media Query:
在我的 CSS 中，我现在得到了以下媒体查询：
@media only screen and (min-width: 768px) {
.main div.con1 {
float: right;
width: 57%;
}
.main div.con2 {
float: right;
width: 57%;
}
Is it possible to swap the order around and if so, how can I do it? Anyone got maybe a link to a good tutorial?
是否可以交换订单，如果可以，我该怎么做？任何人都可能有一个好的教程的链接？
Thanks a lot in advance !
非常感谢！
回答by Ryan Gates
The method used in the StackOverflow question "CSS positioning div above another div when not in that order in the HTML"seems to be your best bet.
StackOverflow 问题中使用的方法“CSS 将 div 定位在另一个 div 之上，而不是在 HTML 中的顺序”似乎是您最好的选择。
回答by Matoeil
with js:
与js：
//on load
responsive_change_box_order();
//on resize
window.addEventListener('resize', responsive_change_box_order );
function responsive_change_box_order() {
if (window.matchMedia("(max-width: 1118px)").matches) {
jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
}
else{
jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
}
}
}
回答by Eggineer
This snippet uses flexbox and related properties to meet your end requirement.Also kindly note that you use use appropriate vendor prefixes for flexbox when you implement or use something like autoprefixeror prefixfree.
此代码段使用 flexbox 和相关属性来满足您的最终要求。另请注意，当您实现或使用诸如autoprefixer或prefixfree 之类的东西时，请为 flexbox 使用适当的供应商前缀。
.main{
display:flex;
flex-direction:column
}
.con1{
order:2;
background-color: green;
}
.con2{
order:1;
background-color: red;
}
/*For Large screen only*/
@media(min-width:1200px){
.con1{
order:1;
}
.con2{
order:2;
}
}<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div>
<!-- #main -->
</div>
<!-- #main-container -->