使用 3 列的 Bootstrap 列排序

Posted 2023-05-08

【中文标题】使用 3 列的 Bootstrap 列排序

【英文标题】：Bootstrap column ordering with 3 column

【发布时间】：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 中并从那里定位

【参考方案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>