Empty vertical space between columns in Bootstrap 4

It's happening because Bootstrap 4 is flexbox, and all of the columns become the same height as the tallest column...

Instead of this:

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
 ------------------ |         |
|                  ||         |
 ------------------  ---------

You get this:

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
                    |         |
                    |         |
 ------------------  ---------
|                  |
 ------------------

---

Usually, you can workaround this (as you tried) by nesting the columns, but then you won't get the desired column order....

Nesting:

<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12 description"></div>
                <div class="col-lg-12 commments"></div>
            </div>
        </div>
        <div class="col-lg-3 sidebar"></div>
    </div>
</div>

However, to get the desired column order, the columns must be contained in a single .row.

Floats:

So, the workaround in BS4 is to use floats (like BS3 did) as explained here: Bootstrap 4 - I don't want columns to have the same height. Like this:

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

<div class="container">
   <div class="row d-lg-block">
      <div class="col-lg-9 float-left description">Desc</div>
      <div class="col-lg-3 float-right sidebar">Sidebar</div>
      <div class="col-lg-9 float-left comments">Comments</div>
   </div>
</div>

The d-lg-block sets display:block on the row instead of display:flex which allows the columns to float in lg screen widths.

Related:
Bootstrap with different order on mobile version