引导网格以较小的分辨率重新排列

Question

我在这个小提琴中有一个示例引导网格。

<div class="row">
  <div class="col-md-3 col-xs-3">left</div>
  <div class="col-md-6 col-xs-6">Center</div>
  <div class="col-md-3 col-xs-3">Right </div>
</div>

将网格绘制为

在较小分辨率的设备中打开它时，它会给出类似的信息（如果没有col-xs-*类

但是，如何在较小分辨率的屏幕中重新排列网格，如下图所示？

Answer 1

您可以执行此操作，但是这将需要您更改源顺序。

 .col{ border: 1px solid #000; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col col-md-push-3 col-md-6 col-xs-12">Center</div> <div class="col col-md-pull-6 col-md-3 col-xs-6">left</div> <div class="col col-md-3 col-xs-6">Right </div> </div>