自举3:拉杆后的柱推

Question

我正在使用Bootstrap 3，并试图像这样排列列：

在小屏幕上：

​

​

在大屏幕上：

​

​

到目前为止我所拥有的是：

​

​

我使用的代码是：

<div class="container">
   <div class="row">

    <div class="col-sm-5 col-sm-push-7">
      Sidebar top
    </div>

    <div class="col-sm-7 col-sm-pull-5">
      Main content
    </div>

    <!-- I also tried removing the push-7 below with no luck -->
    <div class="col-sm-5 col-sm-push-7"> 
      Sidebar bottom
    </div>                          

  </div>
</div>

我有点困惑，因为Bootstrap在内部对列使用float:left，所以在大的情况下，我希望按下的“侧边栏底部”会浮到拉出的“主内容”的左侧，因为它有空间。但这并没有发生。

有人解决过类似的问题吗？谢谢!

引导代码：http://www.bootply.com/YscbG7cX0G

Answer 1

请试试这个HTML结构

    <div class="row">

    <div class="col col-sm-5 pull-right" style="background-color:#3B8686;height:50px;">
        Sidebar top
    </div>

    <div class="col col-sm-7" style="background-color:#0B486B;height:100px;">
        Main content
    </div>

    <div class="col col-sm-5" style="background-color:#A8DBA8;height:50px;">
        Sidebar bottom
    </div>

</div>

谢谢。