0

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

http://jsfiddle.net/jr70k9L6/

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

D.icon
  • 396
  • 3
  • 14

1 Answers1

0

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>

http://jsfiddle.net/j0scL2r9/

D.icon
  • 396
  • 3
  • 14