使用引导程序从 3x2（桌面）到 2x3（移动）布局

Question

我在桌面视图中的网页分为 2x3 布局，即两行，每行有 3 个网格列（引导行和列），如下所示：

**image1   image2   image3
image4   image5   image6**

<div class="row">
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image1.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image2.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image3.png"/>
   </div>
</div>
<div class="row">
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image4.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image5.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image6.png"/>
   </div>
</div>

当我缩小到移动尺寸（col-xs）时，我希望第二页采用 2x3 布局，如下所示：

**image1   image2
image3   image4
image5   image6**

这可以使用引导框架来实现吗？

Answer 1

只需在列类中添加 xs 视口的声明并使其成为单行，如下所示。只要列（以及列偏移量，如果您正在使用它们）等于 12，您就可以使用单个行包装器来制作几行的列。很高兴能帮上忙。

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
         <img src="image1.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image2.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image3.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image4.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image5.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image6.png"/>
    </div>
</div>

示例： http://www.bootply.com/8JlDo3kXKH