css - Bootstrap 3 : Column push after pull

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，所以在大情况下，我希望被推的“侧边栏底部” float 在被拉的“main”的左侧内容”，因为它有空间。不过，这并没有发生。

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

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>

谢谢。