您如何仅在移动视图中将一个元素置于另一个元素之上？答案

【问题标题】：How do you put an element above another in mobile view only?您如何仅在移动视图中将一个元素置于另一个元素之上？
【发布时间】：2021-05-14 07:17:32
【问题描述】：

我正在使用 Bootstrap 3.x，并且我有两个 col-lg-6 的 div。 X 列和 Y 列。

在桌面视图中，X 列在左侧，Y 列在右侧。

如何获得它以便在较小的屏幕宽度上，Y 列堆叠在 X 列上方？

【问题讨论】：

请检查这个简单的分析器：stackoverflow.com/a/46533853/5236174

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

我认为您可以将 Y 列放在 X 列之前，并使用 pull-right 或 pull-left 进行浮动操作。看看下面的sn-p。

@media all and (max-width: 1000px) {
  .mobile .col-y {
    float: left !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container desktop">
  <div class="col-xs-6 col-y pull-right">Y</div>
  <div class="col-xs-6">X</div>
</div>

<div class="container mobile">
  <div class="col-xs-6 col-y pull-right">Y</div>
  <div class="col-xs-6">X</div>
</div>

您也可以只使用媒体查询，而不使用pull-right。这取决于您，两种变体都是正确的。我使用了col-xs-6，因为预览窗口很小，你应该自定义它。

【讨论】：

【解决方案2】：

非常非常简单：

按照您想要的移动方式对其进行编码。

首先， X 秒。

.col-xs-*是手机屏，.col-sm-*是大屏

在 X 和 Y 上使用 .col-xs-12，以便在移动屏幕上将 Y 堆叠在 X 上方。
使用.col-sm-6 将X 和Y 放在一排以获得更大的屏幕。
并使 X:.pull-left 和 Y:.pull-right 在更大的屏幕上具有 X-Y、左右方向

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="col-xs-12 col-sm-6 pull-right">Y</div>
  <div class="col-xs-12 col-sm-6 pull-left">X</div>
</div>

【讨论】：

【解决方案3】：

对于我们这些在 Bootstrap 4(+) 天通过谷歌搜索登陆这里的人，就像我一样，现在完成的方式是使用一系列“订单”类。

文档here

这是一个例子：

<div class="col-md-6 order-1 order-lg-0">
    <!-- at mobile I'm second -->
</div>

<div class="col-md-6 order-0 order-lg-1">
    <!-- at mobile I'm first -->
</div>

注意：这是移动优先的设计标准，因此如果您将订单设置为较小的尺寸，它将适用于较大的订单，除非被覆盖，因此需要“order-lg-

【讨论】：