Twitter bootstrap 柱的排序和固定间隙

我需要有一个相当不同的内容分发每个设备

碰巧有一个和我一样的问题。 但这一结论并不完全符合这个问题

情况： 以下是我希望看到xs设备内容的方式：

下面是我希望看到sm设备内容的方式：

对于md和其他我需要看到的

A、 B，C 在同一排

中未解决的问题，如中所示

A
A
A
B
B
B
B
B
B
B
B
B

C
C
C
C
C
C
C
C
C

在sm设备中，来自B的内容非常高；所以我在a内容和C内容之间有一个垂直的差距

我想有一个内容和C内容一样在同一列，没有垂直的差距

小提琴中xs和md的分布符合我的要求

我看不出我如何能够通过引导实现xs（来自fiddle）、sm（作为axplained）和md（来自fiddle）发行版

---

谢谢您的帮助。

我有点把段落搞砸了，但这一段的空间少了，效果也不错，尽管这可能不是最好的方法，但现在这就解决了问题：

<div class="container">
            <div class="row">
                <div class="col-sm-6 col-xs-12 col-md-4">
                    <div style="color:red" class="col-sm-12 col-xs-12 col-md-12">A<br>A<br>A</div>
                </div>
                <div class="col-sm-6 col-xs-12 col-md-8">
                    <div style="color:blue" class="col-sm-12 col-xs-12 col-md-4">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br></div>
                    <div style="color:green" class="col-sm-12 col-xs-12 col-md-4">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br></div>
                </div>
            </div>
</div>

A
A
A
B
B
B
B
B
B
B
B
B

C
C
C
C
C
C
C
C
C

创建一个自定义类，其中

float:right

仅在

sm

处触发，如下所示：

@media (min-width: 768px) and (max-width: 991px)
{
.col-sm-pull-right{
    float:right;
  }
}

并将其应用于A和C分区

演示：

---

ps-我有点惊讶这样的类在引导中不存在，但也许有一个很好的理由

我不知道这是可能的。非常感谢。

@media (min-width: 768px) and (max-width: 991px)
{
.col-sm-pull-right{
    float:right;
  }
}