Html 使用bootstrap对我需要的列进行响应式排列

我有十二个社交偶像

我想成为：

桌面模式下12行（共1行）

平板电脑模式下每行3个（共4行）

移动尺寸每行1个（共12行）

我有这个标记：

<div class='container'>
   <div class='row'>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

   </div>
</div>

但很快就会变成12行（在平板电脑模式下）

谢谢使用

<div class="col-xs-12 col-sm-4 col-md-1"></div>

对于每个div，是这样的吗

<div class='container'>
    <div class='row'>
        <div class='col-sm-12 col-md-4 col-lg-1'>1</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>2</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>3</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>4</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>5</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>6</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>7</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>8</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>9</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>10</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>11</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>12</div>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

（调整预览的宽度以查看其变化）

您可以这样做

<div class="container">
   <div class="row">
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
   </div>
</div>

x
x
x
x
x
x
x
x
x
x
x
x

---

请注意，您不需要使用

col-xs-12

，因为默认情况下，引导程序将在最小的设备（电话）上堆叠。

Hi以下是您要查找的答案吗？Hi。他们都是对的。但在提出上述问题之前，我已经使用过它们。对于小于760px的设备，我需要的是一个“东西”，它可以将X列分解成更小的部分（更多的媒体查询）。虽然我使用Javascript（而不是媒体查询）向列X添加了更多大小-*

<div class="container">
   <div class="row">
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
   </div>
</div>