Html 引导3列包装-占用列中的可用空间

我有点纠结于如何使用Bootstrap3正确地排列东西。当一列换行时，我希望它向上滚动到最后一个div的底部

通常情况下，我会有一个边栏，超过了主体的长度。侧栏中的信息不如主框重要，但比底部的信息更重要

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

查看示例代码-

。示例{
背景颜色：绿色；
最小高度：200px
}
.例2{
背景色：红色；
最小高度：500px；
}

信息主体
在大屏幕上显示侧边栏上的重要信息
不太重要的信息

如何创建包含两列（如第9列和第3列）的主页，其中第3列是侧边栏。那么你在主页上添加的所有内容都不会有你所说的空白

例如：

<div class="row">
    <div class="col-sm-9">
        <!-- Main page content here -->
    </div>
    <div class="col-sm-3">
        <!-- Sidebar content here -->
    </div>
</div>

---

一种方法是简单地使用侧边栏上的

向右拉。这将使第二列保持在右侧

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


信息主体
在大屏幕上显示侧边栏上的重要信息
不太重要的信息

他们打电话时的顺序很重要。它必须是：绿色-红色-绿色添加两列，如果我没有弄错的话，将以绿色-绿色-红色-我的坏结束，我想不出任何东西在没有javascript的情况下可以做到这一点…没问题，我自己也被难倒了。这似乎是可能的。如果我用pull right浮动较小的列，我可以在大屏幕上获得适当的效果。但是，如果窗口被重新调整大小，它将不会相应地改变。除了隐藏的xs或可见的md等之外，可能还使用了浮动权限……那么您必须为这两个场景定义两次侧边栏部分，认为这将起作用，并且是一个有效的解决方案，但作为最后的手段。我不喜欢重复发送相同的信息两次，而它们之间的变化如此之小。侧边栏中有相当大量的信息。这将需要大量的数据。如果没有其他选择，我会接受这个答案，但我真的希望我不必。这就是我自己的结局，它在更大的屏幕上产生了我想要的东西，但现在如果你在更小的屏幕上，该栏将不再调整大小。这在示例中是可见的。