列的排序和固定间隙

Question

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

并且碰巧遇到了与 this one 几乎完全相同的问题。但是 demo from the selected response 不太符合问题。

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

下面是我希望如何查看 sm 设备的内容：

关于 md 和其他我需要看的东西

A, B, C in the same row.

我遇到的问题在 demo from the selected response 中没有解决，显示在这个 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 的内容非常高；所以我在A内容和C内容之间有一个垂直的差距。

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

fiddle 中 xs 和 md 的分布符合我的要求。

我不明白我如何设法让 xs（来自 fiddle）、sm（如 axplained）和 md（来自 fiddle）分布 bootstrap.

感谢您的帮助。

Answer 1

我把段落弄乱了，但是这个段落少了 space 并且工作正常，尽管它可能不是最好的方法，但这暂时解决了问题：

<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

创建自定义 class，float:right 仅在 sm 时触发，如下所示：

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

并将其应用于 A 和 C 分区。

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

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

列的排序和固定间隙

Ordering of columns and fixing gaps

twitter-bootstrap

twitter-bootstrap-3