简单的列和行使用引导移动版面重新排列？

Question

我使用引导和它的网格功能为我的网页布局。我有我的基地设置为中型和大型屏幕，但我正在开发我的小屏幕布局。我已经能够创建正确的结果，但它总是使代码更加复杂。我想知道是否有办法，可能使用引导列排序功能，创建下面的布局，没有太多复杂的HTML，理想情况下只使用HTML和CSS？这里是我的代码：

<div class="container-fluid PageView text-center"> 
      <div class="row Page2"> 
       <div class="col-md-2"></div> 
       <div class="col-md-2"> <span class="glyphicon glyphicon-bullhorn"></span> 
       </div> 
       <div class="col-md-1"></div> 
       <div class="col-md-2"> <span class="glyphicon glyphicon-ok"> </span> 
       </div> 
       <div class="col-md-1"></div> 
       <div class="col-md-2"> <span class="glyphicon glyphicon-phone"> </span> 
       </div> 
       <div class="col-md-2"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-2"></div> 
       <div class="col-md-2"><h2>Title</h2></div> 
       <div class="col-md-1"></div> 
       <div class="col-md-2"><h2>Title</h2></div> 
       <div class="col-md-1"></div> 
       <div class="col-md-2"><h2>Title</h2></div> 
       <div class="col-md-2"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-2"></div> 
       <div class="col-md-2"><p class="lead">Text</p></div> 
       <div class="col-md-1"></div> 
       <div class="col-md-2"><p class="lead">Text</p></div> 
       <div class="col-md-1"></div> 
       <div class="col-md-2"><p class="lead">Text</p></div> 
       <div class="col-md-2"></div> 
      </div> 
     </div> 
    </div> 

我的原始布局（我想保持中等+尺寸的布局）：

[1A] [1B] [1C]

[2A] [2B] [图2C]

[3A] [3B] [3C]

这是我想为小屏幕的布局。

[1A]

[1B]

[1C]

[2A] [3A]

[2B] [3B]

[2C] [3C ]

任何建议将不胜感激。

Answer 1

可以通过嵌套标题和文本列到新的行，以便当所述视口仅改变第一3列堆叠达致这[1A，1B，1C]，而剩余的（嵌套列）落入一个6x6柱形成。

请参阅Docs和工作示例代码段。

body { 
 
    padding-top: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container text-center"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <div class="alert alert-warning"><span class="glyphicon glyphicon-bullhorn"></span> 1A</div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="alert alert-warning"><span class="glyphicon glyphicon-ok"></span> 1B</div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="alert alert-warning"><span class="glyphicon glyphicon-phone"></span> 1C</div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-12"> 
 
      <div class="alert alert-info"> 
 
      <h2>Title 2A</h2> 
 

 
      </div> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-12"> 
 
      <div class="alert alert-danger"> 
 
      <p class="lead">Text 3A</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-12"> 
 
      <div class="alert alert-info"> 
 
      <h2>Title 2B</h2> 
 

 
      </div> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-12"> 
 
      <div class="alert alert-danger"> 
 
      <p class="lead">Text 3B</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-12"> 
 
      <div class="alert alert-info"> 
 
      <h2>Title 2C</h2> 
 

 
      </div> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-12"> 
 
      <div class="alert alert-danger"> 
 
      <p class="lead">Text 3C</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>