以最大宽度480px反转行的顺序

Question

我有一个正常的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>

Answer 1

您可以使用flexbox并更改要重新订购的子项的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>

Answer 2

这是一个flexbox选项，使用某个媒体查询的顺序，只在第一个框之前移动第二个框。订单的其余部分将是相同的：

.container {
  display: flex;
  flex-wrap: wrap;
}
.row {
  width: 100%;
  height: 3em;
  border: 1px solid red;
  order: 2;
}
@media (max-width: 600px) {
  #section2 {
    order: 1;
  }
}