bootstrap，css为暴徒重新排序div

Question

我有两个div一个接一个地放置。在移动设备上，两个div垂直堆叠。哪个好。但我试图在移动设备上重新排序。当屏幕尺寸变小时，我希望第二个div保持在第一个顶部。我尝试了几种方法 - 弹性箱顺序，方向等。但是无法达到效果。

尝试了

方法：How can I reorder my divs with CSS?

有人可以帮助我。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3" id="flex">
  <div class="bg-light text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="a">
    <div class="my-3 p-3">
      <p>Test</p>
    </div>
  </div>
  <div class="bg-dark text-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="b">
    <div class="my-3 p-3">
      <p>Test</p>
    </div>
  </div>
</div>

Answer 1

您可以使用flex-column-reverse切换元素的位置。您还可以使用断点仅在移动/小屏幕上切换位置。在这种情况下，列会反转直到md - 断点。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column-reverse flex-md-row flex-md-equal w-100 my-md-3 pl-md-3" id="flex">
  <div class="bg-light text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="a">
    <div class="my-3 p-3">
      <p>Test</p>                               
    </div>
  </div>
  <div class="bg-dark text-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="b">
    <div class="my-3 p-3">
      <p>Test</p>
    </div>
  </div>
</div>