I've noticed that something small changed between v3 and v4 I wasn't aware of.
Basically i tried to build the Answer of this Question: Twitter Bootstrap 3 rowspan and reorder but in Bootstrap4.
The obvious solution would be to use the "float-sm-right" class, instead of the custom one "b-col". But this is not working, instead the red col always gets pushed to the end of the blue one.
<div class="col-sm-5 float-sm-right">
So is there any way to build this in Bootsrap4, while still getting the A-B-C order for smaller-sizes than sm?
Seems somehow trivial to me, but I just cant wrap my head around this...
The answer was simple: Flex does not float.
Bootsrap4 class="row" is display: flex; so float-sm-right will not work.
If you get rid of class="row" and float all the div's inside that grid is possible in v4:
<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>