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

【问题标题】：Change order of divs with push/pull column in Bootstrap在 Bootstrap 中使用推/拉列更改 div 的顺序
【发布时间】：2014-12-21 22:30:36
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

实际上，从头开始。复制内容不是问题。要么这张照片被引用了两次，但实际上只加载了一次，这让我有机会为移动设备加载一张较小的照片。