Twitter bootstrap 在引导中更改堆叠顺序，但在移动设备和桌面上保留全宽？

我以前查过这个问题，但大多数人通常希望从桌面开始：

[B] [A]

致（移动电话）：

[A]

[乙]

所以他们这样做：

           <div class="container">

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


       </div> <!-- cointainer -->

A.
B

但我实际上想做（桌面）：

[乙]

[A]

要移动：

[A]

[乙]

我尝试添加偏移lg和col-lg-12之类的内容，但出于某种原因，它会使其中一个div消失：

           <div class="container">

            <div class="row">
                <div class="col-lg-12 col-lg-offset-12 col-sm-6 col-sm-push-6">
                    A
                </div>
                <div class="col-lg-12 col-sm-6 col-sm-pull-6">
                    B
                </div>
            </div>


       </div> <!-- cointainer -->

A.
B

谢谢大家!

编辑：

---

尝试在不重复A或B的情况下完成此操作。

约翰·汤姆森，您好。这里有一种方法可以通过引导和使用

隐藏的xx

类来实现这一点。
下面是本演示的

这个演示代码也有像您在这里寻找的那样堆叠的div块

只需设置3个div，并使其中两个div具有相同的内容，并在需要时显示/隐藏其中1个div，这就是我们在此示例中的工作方式

启动模板
身体{
填充顶部：50px；
}
.街区{
高度：200px；
背景色：达克朗格；
}  
.区块2{
高度：70像素；
背景色：蓝紫色；
利润率最高：2%；
利润底部：2%；
} 
.中心{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
@介质（最大宽度：768px）{
.xs视图{
颜色：白色；
文字装饰：下划线；
}    
切换导航








B
A.
B

最简单的解决方案实际上是一个小小的jQuery：

if ($(window).width() < 767) {
   $("#b").insertBefore("#a");
}

if（$（窗口）.width（）<767）{
$（“#b”）。在（“#a”）之前插入；
}

HTML:

A.
B

---

谢谢，但我可能还不够清楚。对不起，我应该说得更清楚。我想在不复制一个div的情况下完成这项工作。在这个解决方案中，我似乎必须复制B？嗨，约翰，没问题，我第一次以为你不想使用推/拉。我在我的帖子中添加了另外两个选项。你需要处理e当浏览器的大小可能调整回桌面时，这种情况与jquery略有不同。您提供了解决方案吗？基本上我也有类似的问题，解决方案是在容器中加载时使用JS复制页面上的元素。然后使用引导类基于断点显示/隐藏元素。

<div class="container">
  <div class="col-xs-12 bg-warning" id="a">A</div>
  <div class="col-xs-12 bg-danger" id="b">B</div>
</div>