响应式设计超过2列使用命令bootstrap3

Question

使用bootstrap 3我对列排序的推/拉有一些疑问。这就是我所追求的： 现在（大尺寸）

    .          .         .                                 
l   .    c     .     r   .                    
    .          .         .

到（小尺寸）

  .                   .                                     
  .         c         .                       
  .                   . 

  .        .          .                               
  .    l   .   r      .
  .        .          .

请帮助我？

Answer 1

使用col-xs-*作为最小的显示布局。将col-lg-*更改为col-sm-*，以便Bootstrap将此样式用于所有其他显示尺寸。

将col2设置为col-xs-12会强制其他元素位于新行上。

将col2移动为第一项，您可以使用col-sm-push-*＆amp; col-sm-pull-*将其移动到较大显示尺寸的第二个位置。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-2">col2</div>      
  <div class="col-xs-6 col-sm-2 col-sm-pull-6">col1</div>
  <div class="col-xs-6 col-sm-4">col3</div>
</div>

使用BootStrap Grid Options。