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

我有一个正常的html/css布局，如下所示。但是，对于最大宽度480px，我想颠倒section1和section2的顺序。我使用引导

我希望第2排排在第1排之前。我该怎么做

    <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并更改要重新排序的子项上的

order

属性

@介质（最大宽度：480px）{
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
#第2节{
顺序：-1；
}
}

1
2
三

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

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

---

我建议使用flexbox。我将试着给出一个例子来发布。看看pull和push类。