我有一个正常的 html/css 布局,如下所示。但是,对于 max-width 480px,我想颠倒 section1 和 section2 的顺序。我使用 Bootstrap 。
我希望 section2 行位于 section1 行之前。我该怎么做?
<div class="container" id="content">
<div class="row" id="section1">
</div>
<div class="row" id="section2">
</div>
<div class="row" id="section3">
</div>
</div>
<footer>
</footer>
最佳答案
您可以使用 flexbox 并更改要重新排序的 child 的 order
属性。
@media (max-width: 480px) {
.container {
display: flex;
flex-direction: column;
}
#section2 {
order: -1;
}
}
<div class="container" id="content">
<div class="row" id="section1">1
</div>
<div class="row" id="section2">2
</div>
<div class="row" id="section3">3
</div>
</div>
关于html - 在最大宽度 480px 处反转行的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42449364/