在不使用引导程序的情况下重新排序 div

【问题标题】：Reorder divs without using bootstrap在不使用引导程序的情况下重新排序 div
【发布时间】：2017-03-24 08:21:21
【问题描述】：

不使用引导库，如何更改两个 div 的顺序。有什么办法吗

<div class='parent'>
 <div class='child-1'>Abc..</div>
 <div class='child-2'>Xyz..</div>
</div>

对于移动设备，我想在顶部显示孩子 2。

【问题讨论】：

【解决方案1】：

您可以在媒体查询中对 .parent 使用此 CSS 规则。这将自动反转顺序并垂直堆叠它们：

.parent {
      display: flex;
      flex-direction: column-reverse;
 }

<div class='parent'>
 <div class='child-1'>Abc..</div>
 <div class='child-2'>Xyz..</div>
</div>

【讨论】：

【解决方案2】：

在父级上使用带有flex-direction: column; 的flexbox，然后在您的媒体查询中，使用order 属性对元素重新排序。

.parent {
  display: flex;
  flex-direction: column;
}
@media (max-width: 420px) {
  .child-2 {
    order: -1;
  }
}

<div class='parent'>
 <div class='child-1'>Abc..</div>
 <div class='child-2'>Xyz..</div>
</div>

【讨论】：