html - Empty vertical space between columns in Bootstrap 4

Question

I have this html structure:

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

The final effect is this: I need this HTML structure because when I have a smaller viewports and Bootstrap switches to the 1-column mode, I need that sidebar column goes between description and comments columns (where actually there is the empty space).

The problem is that I want to avoid to have that empty space when the template isn't in "mobile mode".

I tried many ways but I can't achieve this, someone could help me?

EDIT

I tried this way:

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

And tried to reorder by using the css "order", but doesn't worked (the only thing it allows me to do is to put sidebar at the start of the page, but isn't what I want).

Answer 1

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