html - 如何使用bootstrap4在小屏幕上将div从div内部移动到它的正下方

Question

在此处输入图像描述 我有一个 div(div1) 包含另一个 div(div2) 我想知道如何在小屏幕上将 div1 移动到 div2 下 我正在使用 bootstrap4

我尝试使用 row 和 col 类，但没有用

( (div2) )<---- div2 inside div1 我需要：(div1) (div2) 在彼此之上

编辑：

<div id="div1" style="background:url("sdic/sdv.jpg") center no-repeat cover;">
 <div id="div2">
  Some content
 </div>
</div>

我希望 div2 位于 div1 之下，并且 div 将保留在里面的背景图像

标签： htmlcssbootstrap-4

Answer 1

您需要在 div1 中引入另一个 div。在大于 425 像素的屏幕尺寸上，它将具有正常排序。小于425px，订单会翻转。

编辑：更新了答案，使其不需要自定义 CSS。您可以使用 bootstrap 4 d-flex 和 order 类来实现相同的结果。这也将使用引导断点。

（如果没有引导程序，请使用提供的 CSS）

.div1 { display: flex; flex-flow: column; }
.div3 { order: 1; }
.div2 { order: 0; }

@media (min-width: 425px) {
  .div3 { order: 0; }
  .div2 { order: 1; }
}

<div class="div1 d-flex">
  <div class="div3 order-2 order-sm-1"><h3>Div3</h3></div>
  <div class="div2 order-1 order-sm-2"><h2>Div2</h2></div>
</div>

.div1 { display: flex; }
.div2 { order: 2; }
.div3 { order: 1; }