在Bootstrap 4中列之间的空垂直空间

Question

我有这个HTML结构:

<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>

最终的效果是这样的: 我需要这个HTML结构,因为当我有一个较小的视口和Bootstrap切换到1列模式时,我需要侧边栏列在描述和注释列之间(实际上有空的空间).

问题是,当模板不处于"移动模式"时,我想避免使用那个空白空间.

我尝试了很多方法,但我无法做到这一点,有人可以帮助我吗？

编辑

我试过这种方式:

<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,所有列都与最高列的高度相同.通常,您可以通过嵌套列来解决此问题(正如您所尝试的那样),但是您将无法获得所需的列顺序....

嵌套:

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

要获得所需的列顺序,列必须包含在一个列中.row.因此,BS4中的解决方法是使用浮点数(如BS3那样),如下所述: Bootstrap 4 - 我不希望列具有相同的高度.像这样:

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

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

所述d-lg-block集display:block上的行,而不是display:flex其允许列漂浮在lg屏幕宽度.

相关:
在移动版本上具有不同顺序的Bootstrap