Css 用Twitter引导响应地重新排序div？

我正在使用和，并希望响应地重新排序元素

这就是我想如何使用我的元素。在

-xs

或

-sm

断点处，将包含的div堆叠成4行：

在

-md

或

-lg

断点处，将包含的div堆叠成2行：

这是当前代码-我知道如何在包含的div上设置类，但不知道如何在A、B和C上设置类：

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

内容
B的含量
C的含量
... 更多包含div。。。

我不知道如何使用引导程序3和以正确的顺序获得A、B和C。真的有可能吗

---

这就是我使用JSFiddle所能做到的：

有没有理由不在这方面使用更传统的方法，即将B向左浮动，而将其他元素向右浮动

例如，如果您将此添加到JSFIDLE中的当前CSS中：

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

看

---

我不确定Bootstrap的列排序是否可以实现堆叠效果，也许只有重新排序。。。尽管关于该功能的文档非常少。

Bootstrap 4或Bootstrap 5的用户希望看到以下问题：

---

Bootstrap 3（原始答案）

我想您应该看看

push

和

pull

类

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

内容
B的含量
C的含量

---

演示：

我尝试了按Skelly的答案所示的推/拉，但一旦应用了高度，C就会出现在新的一行：

如果以小尺寸显示时可以首先显示B，那么我认为在右侧列中创建一行以包含a和C更有意义：

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

B的含量
内容
C的含量

---

参见

@skelly提供的答案是一个很好的起点，但确实会引起一些垂直对齐问题。设想A是一个高div，然后C在A下方垂直对齐：

[A] [B]
[ ]
    [C]

此外，如果您想进一步了解这一点，您还需要考虑使用<代码> CurrFix< /Cord>块。比如,

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

如果您希望在最后一个“列”中包含2个以上的元素，或者元素的高度开始使其他元素失去对齐，则这一点尤为重要

使用

clearfix

md

或

lg

将是：

[A] [B]
    [C]
    [D]

---

小提琴示例：

你所说的“4/2堆叠成一排”是什么意思？你是说第一个版本有4个单位高，第二个版本有2个单位高？或者你的意思是第一个版本可以有4个a-b-c组在一条水平线上，而第二个版本可以有2个？这正是我想要的，谢谢！对于阅读这里的任何人来说，推/拉文档的链接是：尽管我仍然不完全理解推/拉到底做了什么……只有当从12列变为6列时，才需要新的网格类。不需要使用col sm-*或col lg-*类，因为它们分别继承xs和md。不要忘记，如果元素开始出现在意外的位置，您可能还需要使用“clearfix”。此示例还提供了[C]的垂直对齐问题正如我的回答中所列。当XS启动时，您的示例将A置于B之下。有没有办法解决垂直对齐问题？我想要的是相反的，但我有相同的对齐问题。例：如果我理解正确，那么您应该移除clearfix和推/拉，例如：

[A] [B]
    [C]
    [D]