网格行为Bootstrap4与Bootstrap3

Question

我注意到在我不知道的v3和v4之间有些微小的变化。

基本上，我试图建立以下问题的答案：Twitter Bootstrap 3 rowspan and reorder但在Bootstrap4中。

显而易见的解决方案是使用“ float-sm-right”类，而不是自定义的“ b-col”类。但这是行不通的，相反，红色列始终被推到蓝色列的末尾。

<div class="col-sm-5 float-sm-right">

http://jsfiddle.net/jr70k9L6/

所以有什么办法可以在Bootsrap4中构建它，同时仍然获得比sm小的尺寸的A-B-C订单？

似乎对我来说是微不足道的，但我只是不能把头缠在这上面...

Answer 1

如果您摆脱了class="row"并在v4中将所有div浮动到该网格内，则可以：

<div class="">
    <div class="col-sm-7 float-left" style=" background: green; height: 300px;">
        <p>A</p>
    </div>
    <div class="col-sm-5 float-left float-sm-right" style="background: blue; height: 600px;">
        <p>B</p>
    </div>
    <div class="col-sm-7 float-left" style="background: red; height: 300px;">
        <p>C</p>
    </div>

</div>

http://jsfiddle.net/j0scL2r9/