如何在移动版式上将div从上到下移动? [英] How can I move a div from top to bottom on mobile layouts?

问题描述

我正在使用Bootstrap 4，但是如果它在版本3上可以运行，则应该在v4上运行.

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

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

I have 2 divs within a column like so:

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

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

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.

如果Bootstrap无法实现，请使用纯CSS.

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

推荐答案

可以使用CSS flexbox来实现.

This can be achieved using CSS' flexbox.

• 添加具有以下属性的新选择器.col-xs-12:
  • display: flex;告诉孩子们使用flexbox模型
  • flex-direction: column-reverse;将确保子级从下到上(而不是默认的从左到右)
  • Add a new selector .col-xs-12 with the following properties:
    • display: flex; tells the children to use the flexbox model
    • flex-direction: column-reverse; will ensure that the children flow from bottom to top (instead of the default left to right)

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

    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>

    这也可以使用Bootstrap来实现:

    This can also be achieved using Bootstrap:

    • 将以下类添加到容器中:
      • d-flex使容器使用flexbox
      • flex-column-reverse在小屏幕上以相反的顺序对子级进行排序
      • flex-sm-column在大屏幕上按正常顺序对孩子进行排序
      • Add the following classes to the container:
        • d-flex to make the container use flexbox
        • flex-column-reverse to order the children in reverse order on small screens
        • flex-sm-column to order the children in normal order on larger screens

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

        这篇关于如何在移动版式上将div从上到下移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！