在Bootstrap中使用推/拉列更改div的顺序

Question

我正在尝试使用Bootstrap更改三列的顺序和范围，具体取决于设备。

我要这样做：

但是我总是以失踪的div结束，并且我的空间应该是空的空间。这是我最好的尝试，但有些事情显然是错误的：

<div class="row">

   <div class="col-xs-12 col-sm-4" style="background:blue; color:white;">
      Logo
   </div>

   <div class="col-xs-12 col-sm-push-8" style="background:red; color:white">
      Photo
   </div>

   <div class="col-xs-12 col-sm-pull-12" style="background:green; color:white">
      Nav
   </div>

</div>

Answer 1

如果你想达到this，我现在知道的唯一方法就是没有推/拉法。

Here是我的代码：

<div class="col-sm-4" style="background:blue; color:white;">Logo</div>

<div class="col-sm-12 visible-xs" style="background:red; color:white;">Photo</div> 

<div class="col-sm-8" style="background:green; color:white;">Nav</div>

<div class="hidden-xs" style="background:red; color:white;">Photo</div>