使用 3 列的 Bootstrap 列排序答案

【问题标题】：Bootstrap column ordering with 3 column使用 3 列的 Bootstrap 列排序
【发布时间】：2015-04-03 14:39:44
【问题描述】：

Bootstrap 3.2.1 排序三列排序问题。尝试在小屏幕中订购三列，如下图 img。

在中等屏幕中应该如上图所示。

但如果 COL A 高度大于 COL C，则排序不起作用

代码：

<div class="col-md-5 col-md-push-7"> Col B </div>
<div class="col-md-7 col-md-pull-5"> Col A </div>
<div class="col-md-5 col-md-push-7"> Col C </div>

Jsfiddle

【问题讨论】：

用单词来解释你的问题，而不是仅仅在问题上贴图片
没有一些神奇的 javascript 是不可能的 :)
您可能会使用 Masonry 布局样式，只需使用 Css 即可完成。或者您可以将 Col b 和 Col c 包装到一个 div 中并从那里定位

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您所要做的就是将 B 和 C 浮动到右侧。

看看这个fiddle。

<style type="text/css">
    .A, .B, .C {
        background-color: DodgerBlue;
        color: white;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
    }
    .A {
        height: 200px;
        line-height: 200px;
    }
    .B, .C {
        float: right;
        height: 75px;
        line-height: 75px;            
    }
</style>
<div class="col-xs-12 col-md-5 B">B</div>
<div class="col-xs-12 col-md-7 A">A</div>
<div class="col-xs-12 col-md-5 C">C</div>

【讨论】：