我有三个 3 子 div，分别具有类 span2、span7 和 span3。当我的浏览器宽度低于 763px 时，我希望它按照 span2、span3 和 span7 的顺序排列。我将如何通过CSS做到这一点？
这是我的初始代码：
<div class="row-fluid">
<div class="span2">
</div>
<div class="span7">
</div>
<div class="span3">
</div>
</div>
您可以通过使用来实现这一点柔性盒布局和弹性order像这样：
JSFiddle -DEMO
.row-fluid > div {
width: 100px;
height: 100px;
border: 1px solid red;
}
@media (max-width: 763px) {
.row-fluid {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.span2 {
order: 1;
}
.span7 {
order: 3;
}
.span3 {
order: 2;
}
}
<div class="row-fluid">
<div class="span2">span2</div>
<div class="span7">span7</div>
<div class="span3">span3</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
