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>

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

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>

参见工作示例HERE

详细了解Bootstrap订购here

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

使用bootstrap交换div

2 个答案: