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

    

        

            Second column (medium)
        
        

            First column (short)
        
        

            
Third column (tall)
            ..
        
    

• 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