如何使用媒体查询更改 div 的位置

Question

我正在尝试更改页面上 2 个 div 的位置。
这就是它在large screens上的样子
我正在使用引导程序来修复屏幕的布局

d-flex justify-content-start

这就是它在medium and lower screens上的样子
考虑将这个引导类用于中等屏幕

d-flex flex-column-reverse

注意 div 1 和 2 的顺序。

Answer 1

您可以只使用自定义引导 order 类和网格类来实现这一点。无需媒体查询。只需为 DIV 1 上的大屏幕指定 order-lg-1 和 order-md-2，这样它将在中等屏幕上排在第二位。同样，在 DIV 2 上使用类 order-lg-2，因此它将在大屏幕上排在第二位，而 order-md-1 在中型屏幕上排在第一位。

HTML 可能类似于：

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-12 order-lg-1 order-md-2 customDiv">DIV 1</div>
    <div class="col-lg-9 col-md-12 order-lg-2 order-md-1 customDiv">DIV 2</div>
  </div>
</div>

CSS 可能很简单：

.customDiv {
  border: 5px solid black;
  height: 400px;
}

显示此内容的 codepen 链接：https://codepen.io/andyreesecups-the-decoder/pen/mdbgEVY

关于引导网格类的链接：https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

你的 div 类名应该是：

<div class="row">
 <div class="col-lg-9 col-12 order-lg-11">Div 2</div>
 <div class="col-lg-3 col-12 order-lg-1">Div 1</div>
</div>

记住首先要移动。

编辑：他们换错了方式。