Question

我在这里找到了一些解决方案，用push和pull重新排序Bootstrap中的div列，但有没有办法像这样重新排序div？

在像桌面这样的大屏幕上：
| A |
| B |
| C |

关于移动设备
| B |
| A |
| C |

Answer 1

您是否看过Bootstrap中的Responsive实用程序？您可以使用这些实用程序类通过媒体查询按设备显示和隐藏内容：

http://getbootstrap.com/css/#responsive-utilities

也许您可以利用这些实用程序类的顺序来获得所需的效果？

Answer 2

如果我理解正确，你希望它像这样

桌面:(水平）

[a]-[b]-[c]

mobile :(垂直），b先

[b]
[a]
[c]

然后你可以使用自定义媒体查询，请查看下面的小提琴

http://jsfiddle.net/srp07Luq/

.box{ background:red; padding:10px; border:#ddd solid 1px; color:#fff; }
.con2 .box{ background:green; }
.con3 .box{ background:blue; }

@media (min-width: 768px){
    .con1{ float:left; }
    .con2{ float:right; }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-8">
    <div class="row">
      <div class="col-sm-6 con2"><div class="box">content 2</div></div> 
      <div class="col-sm-6 con1"><div class="box">content 1</div></div> 
    </div>        
  </div>
  <div class="col-sm-4 con3"><div class="box">content 3</div></div>  
</div>

在Bootstrap中进行DIV排序

2 个答案: