Bootstrap 4-3列布局，在lg中将右列上拉到左列之下

Question

Bootstrap 4，3列布局

问题：在lg视口中，右列出现在主列内容的结尾之后，如何“拉起”它以使其出现在左列的正下方？

问题演示： https://jsfiddle.net/2kqug64j/4/ https://fiddle.jshell.net/2kqug64j/4/show/

代码（在jsfiddle中也可用）：

<div class="container-fluid body-container">
  <div class="row">
    <div class="col-12 col-lg-4 col-xl-3 order-lg-first">
      <p>Left column - right should be right under this content in lg view - instead of after the end of the Main column content end</p>
    </div>
    <div id="main" class="col-12 col-lg-8 col-xl-6 order-first">
      <div class="row">
        <div class="col-sm-12">
          <p>
          Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, and some more text</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4 col-xl-3 order-last">
      <p>
      Right column...</p>
    </div>
  </div>
</div>

为直观显示我要实现的目标，右列应该在左列的内容正下方，而不是在主列文本结束的位置（如果主列的文本位于该水平）比原来长10倍，则右列内容将从页面的下方开始：

Answer 1

您应该添加CSS来将高度设置为0。这将导致边框等任何样式出现问题。我认为有更好的解决方案。

@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  #main {
    height: 0;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid body-container">
  <div class="row">
    <div class="col-12 col-lg-4 col-xl-3 order-lg-first">
      <p>Left column - right should be right under this content in lg view - instead of after the end of the Main column content end</p>
    </div>
    <div id="main" class="col-12 col-lg-8 col-xl-6 order-first">
      <div class="row">
        <div class="col-sm-12" id="main">
          <p>
          Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, Main column, and some more text</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4 col-xl-3 order-last">
      <p>
      Right column...</p>
    </div>
  </div>
</div>

JSFiddle here