使用Bootstrap交换div

Question

我已经阅读了很多关于使用bootstrap交换、重新排列和替换div的问题和答案，但是我无法解决我的问题。

我有两个包含更多div的div。

一个div(A)在右侧，另一个在左侧(B)。

在桌面和平板电脑视图中，它们设置为AB相邻。 当在移动视图中时，我希望A在B下面。

  <div class="container">

   <div class="row">
     <div class="col-md-6 col-sm-6">
        A
     </div>
     <div class="col-md-6 col-sm-6">
        B
     </div>
   </div>

  </div>

我已经尝试了拉和推，但是没有成功。

欢迎任何帮助。谢谢。

- Isabella

---

我知道你说过尝试过了，但是在顶部DIV中添加col-sm-push-6，在底部DIV中添加col-sm-pull-6应该能完全按照你想要的方式工作。 - Benneb10

当我这样做时，它们确实交换了位置，但在移动视图中没有。我正在使用笔记本电脑工作，在笔记本电脑视图中它们被交换了位置，但是当我调整浏览器大小到最小视图时，它们没有被交换。 - Isabella

看一下这个，尝试相反的方式（为移动设计），并在桌面上交换它们。https://dev59.com/nmEh5IYBdhLWcg3w3mqK - Benneb10

您尝试过使用col-xs-push-6和col-xs-pull-6来针对小型设备进行调整吗？ - justincron

Answer 1

这里有一个解决方案对我很有帮助：

<div class="container">
<div class="row">
    <div class="col-md-6 col-sm-6 col-lg-6 col-push-6">
        Content B
    </div>
    <div class="col-md-6 col-sm-6 col-lg-6 col-pull-6">
        Content A
    </div>
</div>
</div>

点击此处查看实例。

想了解更多关于Bootstrap排序的信息，请点击这里。

- JacobG182

Answer 2

您可以使用 visible 类的技巧：

<div class="row">
<div class="col-md-6 col-sm-6 visible-lg visible-md">
A (Visible-lg & md)
</div>
<div class="col-md-6 col-sm-6">
B
</div>
<div class="col-md-6 col-sm-6 visible-sm visible-xs">
A (Visible-sm & xs)
</div>
</div>

- eylay

---

设计真的很糟糕，特别是当内容不是静态的时候。 - PM 77-1

不要重复自己 - JDandChips