html - Bootstrap 3 Column Wrapping - 占用列中的可用空间

Question

我正在为如何使用 Bootstrap 3 正确排列内容而苦苦挣扎。当列换行时，我希望它向上滚动到最后一个 div 的底部。

很多时候，我的侧边栏会超过主体的长度。侧栏中的信息不如主框重要，但比底部的信息重要。

如何让下例中的两个绿色部分在更大的屏幕上对齐？

查看示例代码 - http://www.bootply.com/42XM6PGoDS

.example{
    background-color: green;
    min-height:200px
      
  }
  
.example2{
  background-color: red;
  min-height:500px;
}

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <div class="example">
        Main Body of Information
      </div>
    </div>
    <div class="col-lg-4">
      <div class="example2">
        Important information on sidebar when on a large screen
      </div>
    </div>
    <div class="col-lg-8">
      <div class="example">
        Less important information
      </div>
    </div>
  </div>
</div>

Answer 1

一种方法是简单地在边栏上使用pull-right。这将使第二列保持在右侧。

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <div class="example">
        Main Body of Information
      </div>
    </div>
    <div class="col-lg-4 pull-right">
      <div class="example2">
        Important information on sidebar when on a large screen
      </div>
    </div>
    <div class="col-lg-8">
      <div class="example">
        Less important information
      </div>
    </div>
  </div>
</div>

http://bootply.com/IGLRYDnc2S