使用 bootstrap 从 3x2（桌面）到 2x3（移动）布局

Question

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

**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**

可以使用bootstrap框架实现吗？

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

使用 bootstrap 从 3x2（桌面）到 2x3（移动）布局

Using bootstrap to go from 3x2(desktop) to 2x3 (mobile) layout

html

css

responsive-design

twitter-bootstrap