带有3列的Bootstrap列排序

Question

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

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