如何在移动布局上从上到下移动 div？ [复制]

Posted 2023-03-05

【中文标题】如何在移动布局上从上到下移动 div？ [复制]

【英文标题】：How can I move a div from top to bottom on mobile layouts? [duplicate]

【发布时间】：2016-01-20 12:02:47

【问题描述】：

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

我在一列中有 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>

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

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

【问题讨论】：

***.com/questions/20171408/…

这适用于排序列，我需要排序2行

【参考方案1】：

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

【参考方案2】：

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

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

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

@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 来实现：

将以下类添加到容器中： 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>

【讨论】：

你救了我好兄弟

【参考方案3】：

以下代码适用于我：

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