用引导程序交换 div答案

【问题标题】：Swapping divs with bootstrap用引导程序交换 div
【发布时间】：2015-12-18 05:39:42
【问题描述】：

我在这里阅读了很多关于使用引导程序交换、重新排列和替换 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>

我试过拉和推，但没有用。任何帮助将不胜感激。谢谢

【问题讨论】：

我知道你说过你已经尝试过了，但是将 col-sm-push-6 添加到顶部 div 并将 col-sm-pull-6 添加到底部 div 应该完全按照你想要的方式工作。跨度>
当我这样做时，它们会交换但不在移动视图中。我正在使用我的笔记本电脑和笔记本电脑视图，它们被交换了，但是当我将浏览器的大小重新调整到大约最小的视图时，它们并没有被交换。
看看这个，尝试相反（为移动设备设计）并在桌面上交换它们stackoverflow.com/questions/21933664/…
您是否尝试过 col-xs-push-6 和 col-xs-pull-6 来定位小型设备？

标签： html css twitter-bootstrap

【解决方案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>

查看工作示例HERE

阅读更多关于 Bootstrap 订购的信息here

【讨论】：

【解决方案2】：

你可以通过可见类使用技巧：

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

【讨论】：

真是一个糟糕的设计，尤其是当内容不是静态的时候。
不要重复自己