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

Question

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

d-flex justify-content-start

这就是它在 medium and lower screens
上的样子考虑将此 bootstrap class 用于中等屏幕

d-flex flex-column-reverse

注意 div 1 和 2 的顺序。

Answer 1

你的 div class 名字应该是：

<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>

记得先移动。

编辑：他们换错了方向。

Answer 2

您可以只使用自定义 bootstrap order classes 和网格 classes 来实现此目的。不需要媒体查询。只需在 DIV 1 和 order-md-2 上为大屏幕指定 order-lg-1，这样它将在中等屏幕上排在第二位。同样，在 DIV 2 上使用 class 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;
}

Link 到 codepen 显示：https://codepen.io/andyreesecups-the-decoder/pen/mdbgEVY

Link 关于 bootstrap 网格 classes: https://getbootstrap.com/docs/4.0/layout/grid/

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

How to change position of divs using media queries

html

css

media-queries

bootstrap-4