我刚刚开始响应式网页设计。我有一个 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 -->
内容有 2 个 div 容器。我想要在小屏幕上
第一区
Div2
在大屏幕上我希望它们交换,
Div2
第一区
在我的 CSS 中,我现在得到以下媒体查询:
@media only screen and (min-width: 768px) {
.main div.con1 {
float: right;
width: 57%;
}
.main div.con2 {
float: right;
width: 57%;
}
是否可以调换顺序?如果可以,我该怎么做?有人可能有一个好的教程的链接吗?
提前非常感谢!
StackOverflow问题中使用的方法
与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"));
}
}
此代码片段使用 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 -->