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 end result is this: I need this HTML structure because when I have fewer viewports and Bootstrap switch to 1-column mode, I need the sidebar column to go between the description and comment columns (where there is actually empty space) .

The problem is that I want to avoid this empty space when the template is not in "mobile mode".

I tried many ways, but I can not achieve this, can someone 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>

css-, (, , , , ).

Answer 1

, Bootstrap 4 flexbox, , . ( ), , .

float (, BS3), : Bootstrap 4 - , . :

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>

d-lg-block display:block display:flex, lg.

:
Bootstrap

Answer 2

.description {
  background-color: red
}

.sidebar {
  background-color: blue
}

.comments {
  background-color: green
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12 description">description</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-12 col-lg-3 sidebar">sidebar</div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-9 comments">comments</div>
  </div>
</div>
</div>

Hide result

, ,