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

Question

Bootstrap 4、3 列布局

问题：在lg view-port中，右栏出现在主栏内容的末尾之后，怎么能“拉上来”，让它出现在左栏的正下方？

问题演示： 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 倍，那么右栏内容将开始在页面下方：

标签： bootstrap-4

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在这里