不使用bootstrap重新排序div

Question

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

index_array = np.argwhere(M == 0)
B[index_array[:,0], index_array[:,1]] = 0

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在媒体查询中的.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>