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.