列的排序和固定间隙

Question

我需要为每台设备分配完全不同的内容。

碰巧和this one有几乎完全相同的问题。 但是demo from the selected response 不太适合这个问题。

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

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

对于 md 和我需要查看的其余部分

A、B、C 在同一行。

我遇到的问题，在demo from the selected response 中没有解决，在this fiddle 中显示。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9 col-sm-push-3 col-md-3 col-md-push-9">
            <div style="color:red">A<br>A<br>A</div>
        </div>
        <div class="col-xs-12 col-sm-3 col-sm-pull-9 col-md-3 col-md-pull-3">
            <div style="color:blue">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br></div>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-offset-3 col-md-6 col-md-offset-0 col-md-pull-3">
            <div style="color:green">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br></div>
        </div>
    </div>
</div>

在 sm 设备中，来自 B es 的内容非常高；所以我在 A 内容和 C 内容之间存在垂直差距。

我希望 A 内容和 C 内容在同一列中，没有垂直间隙。

按照我的要求，小提琴中 xs 和 md 的分布是正确的。

我不知道如何使用引导程序来管理 xs（来自 fiddle）、sm（如 axplained）和 md（来自 fiddle）发行版。

感谢您的帮助。

Answer 1

我有点搞砸了段落，但这个段落空间较小，工作正常，尽管它可能不是最好的方法，但这暂时解决了问题：

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

Answer 2

创建一个自定义类，其中float:right 仅在sm 触发，如下所示：

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

并将其应用于 A 和 C div。

演示：http://www.bootply.com/Oc3cVJN8V3

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