html - Bootstrap 中的 DIV 排序

Question

我在这里找到了一些通过推拉对 Bootstrap 中的 div 列重新排序的解决方案，但是有什么方法可以像这样重新排序 div 吗？

在桌面等大屏幕上:
|一个|
|B|
|C|

在移动设备上
|B|
|一个|
|C|

Answer 1

如果我没理解错的话，你希望它是这样的

桌面:(水平)

[a]-[b]-[c]

移动:(垂直)，b在前

[b]
[a]
[c]

然后您可以为此使用自定义媒体查询，请查看下面我的 fiddle

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>