html - 在最大宽度 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 并更改要重新排序的 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>