Css 引导页脚-在小屏幕中从6列更改为2列

这是我的代码：

<div class="row clearfix">
<div class="col-md-3 column"> </div>
<div class="col-md-1 column">
  <p>Solution 1</p>
  <p>Solution 2</p>
</div>
<div class="col-md-1 column">
  <p>Solution 3</p>
  <p>Solution 4</p>
</div>
<div class="col-md-1 column">
  <p>Solution 5</p>
  <p>Solution 6</p>
</div>
<div class="col-md-1 column">
  <p>About us</p>
  <p>References</p>
</div>
<div class="col-md-1 column">
  <p>Contact us</p>
  <p>Guide</p>
</div>
<div class="col-md-1 column">
  <p>ToS</p>
  <p>Imprint</p>
</div>
<div class="col-md-3 column"> </div>
</div>

解决方案1

解决方案2

解决方案3

解决方案4

解决方案5

解决方案6

关于我们

参考资料

联系我们

向导

托斯

印记

在更大的显示器上，我想要6组两个链接。（6栏）

在较小的显示器上，我想要2组6个链接。（2栏）

但是当我缩小显示时，它们都会变成只有一列的线性布局

如何将其设置为有两列

---

现在我正在使用3-1-1-1-1-1-1-3布局。

对于较小的设备，您可以使用

col-xs-6

<div class="row clearfix">
    <div class="col-md-3 column"> </div>
    <div class="col-md-1 col-xs-6">
      <p>Solution 1</p>
      <p>Solution 2</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>Solution 3</p>
      <p>Solution 4</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>Solution 5</p>
      <p>Solution 6</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>About us</p>
      <p>References</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>Contact us</p>
      <p>Guide</p>
    </div>
    <div class="col-md-1 col-xs-6">
      <p>ToS</p>
      <p>Imprint</p>
    </div>
    <div class="col-md-3 column"> </div>
  </div>

解决方案1

解决方案2

解决方案3

解决方案4

解决方案5

解决方案6

关于我们

参考资料

联系我们

向导

托斯

印记

在引导中有四个类

.col lg-

.col md-

.col sm-

.col xs-

这个不同的类在不同的屏幕大小上工作

.col-xs-X  **0 < X < 767px;** 

.col-sm-X **768px < X < 991px;**

.col-sm-X **992px < X < 1169px;**

.col-sm-X **1170px < X**

.col-xs-X**0

这是引导网格系统的链接