How to fix unexpected column order in bootstrap 4?

Question

I\'m trying to make a layout like the following:

On xs devices, I\'d like the order to be first-second-third.

The sample code I have is

Answer 1

Bootstrap 4 uses flexbox, so the columns are always going to be equal height, and you'll not be able to get the layout that you want on larger screens. The solution is to disable the flexbox for sm and up. Use floats so that the 3rd taller column floats to the right. The flexbox order- will work on mobile (xs).

https://www.codeply.com/go/c31HUTtXra

<div class="container">
    <div class="row d-sm-block">
        <div class="float-left col-sm-8 medium order-2">
            Second column (medium)
        </div>
        <div class="float-left col-sm-4 short order-1">
            First column (short)
        </div>
        <div class="float-left col-sm-4 tall order-3">
            <p>Third column (tall)</p>
            ..
        </div>
    </div>
</div>

• d-sm-block disables flexbox on sm an up
• float-left to float the columns when flexbox is disabled so that the tall columns wraps to the right
• order-* to get the desired order on mobile

Related:
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4