Bootstrap 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列，所以在大的情况下，我希望推送＆＃34;侧边栏底部＆＃34;漂浮在拉动的主要内容的左侧＆＃34;因为它有空间。但事情并非如此。

有没有人解决过类似的问题？谢谢！

Bootply上的代码：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>

谢谢。