Html 如何在移动布局上从上到下移动 div？

How can I move a div from top to bottom on mobile layouts?

提问by Gillardo

I am using Bootstrap 4, but if it works on version 3, it should work on v4.

我正在使用 Bootstrap 4，但如果它适用于版本 3，它应该适用于 v4。

I have 2 divs within a column like so:

我在一个列中有 2 个 div，如下所示：

<div class="row">
    <div class="col-xs-12">
        <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
        <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
    </div>
</div>

Is there a way I can get the divs to swap around on a mobile device? I do not want to use any JavaScript here; I would like to use Bootstrap classes only, if possible.

有没有办法让 div 在移动设备上交换？我不想在这里使用任何 JavaScript；如果可能，我只想使用 Bootstrap 类。

If it is not possible with Bootstrap, then CSS-only please.

如果 Bootstrap 无法实现，请仅使用 CSS。

回答by Hidden Hobbes

This can be achieved using CSS' flexbox.

这可以使用 CSS' 来实现flexbox。

• Add a new selector .col-xs-12with the following properties:
  • display: flex;tells the children to use the flexboxmodel
  • flex-direction: column-reverse;will ensure that the children flow from bottom to top (instead of the default left to right)

• 添加.col-xs-12具有以下属性的新选择器：
  • display: flex;告诉孩子们使用flexbox模型
  • flex-direction: column-reverse;将确保孩子从下到上流动（而不是默认的从左到右）

Run the below Snippet in full screen and resize the window to see the order of the elements change.

全屏运行以下代码段并调整窗口大小以查看元素的顺序更改。

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

A Bootstrap method

Bootstrap 方法

This can also be achieved using Bootstrap:

这也可以使用 Bootstrap 来实现：

• Add the following classes to the container:
  • d-flexto make the container use flexbox
  • flex-column-reverseto order the children in reverse order on small screens
  • flex-sm-columnto order the children in normal order on larger screens

• 将以下类添加到容器中：
  • d-flex使容器使用 flexbox
  • flex-column-reverse在小屏幕上以相反的顺序排列孩子
  • flex-sm-column在大屏幕上按正常顺序排列孩子

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 d-flex flex-column-reverse flex-sm-column">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

回答by Sword I

The following code works for me:

以下代码对我有用：

@media only screen and (max-width: 768px) {
  .xs-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12 xs-column-reverse">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

回答by Viktor Maksimov

.col-xs-12 { height: 200px; position:relative; }
.col-xs-12 div { position:absolute; top:0; left: 0; width:100%; }
.col-xs-12 div:last-child { top: auto; bottom: 0; }

@media (max-width: 480px) {
    .col-xs-12 div { top:auto; bottom:0; }
    .col-xs-12 div:last-child { top: 0; bottom: auto; }
}