Html 引导不均匀列顺序

使用Bootstrap，我有三个不同高度的列。中间一列是最短的。我的问题是，随着屏幕尺寸的减小，右栏只是在中栏下方滑动。我想让它滑到左边

进一步解释： 在手机上使用时，我希望a列和B列并排（列宽为6），C列在a列下对齐。随着屏幕变大，我希望所有列都在同一行上，彼此相邻

以下是我的示例代码：

<div class="container">
    <div class="row">
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
        </div>
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column B</div>
            <div>Column B</div>
            <div>Column B</div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2">
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
        </div>
    </div>
</div>

A列
A列
A列
A列
A列
A列
B栏
B栏
B栏
C列
C列
C列
C列
C列

---

我试着用推拉的方式，但我不能让它正常工作。我只是假设有可能实现我想做的事情。我错了吗？谢谢

网格系统的工作方式是每行有12列。您的HTML将超过12列。更具体地说，您可以在每个列中的

col-xs-6

类中看到这一点，实际上是18，而不是12。换句话说，只要确保一行中的所有列加起来是12。请看下面修订的HTML，了解一下：

<div class="container">
<div class="row">
    <div class=" col-xs-4 col-sm-4 col-md-4">
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
    </div>
    <div class=" col-xs-4 col-sm-4 col-md-4">
        <div>Column B</div>
        <div>Column B</div>
        <div>Column B</div>
    </div>
    <div class="pull-left col-xs-4 col-sm-4 col-md-4">
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
    </div>
</div>
</div>

A列
A列
A列
A列
A列
A列
B栏
B栏
B栏
C列
C列
C列
C列
C列

只需调整列，并确保您的总数为12。此外，您还可以找到有关网格系统的更多信息

---

网格系统的工作方式是每行有12列。您的HTML将超过12列。更具体地说，您可以在每个列中的

col-xs-6

类中看到这一点，实际上是18，而不是12。换句话说，只要确保一行中的所有列加起来是12。请看下面修订的HTML，了解一下：

<div class="container">
<div class="row">
    <div class=" col-xs-4 col-sm-4 col-md-4">
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
    </div>
    <div class=" col-xs-4 col-sm-4 col-md-4">
        <div>Column B</div>
        <div>Column B</div>
        <div>Column B</div>
    </div>
    <div class="pull-left col-xs-4 col-sm-4 col-md-4">
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
    </div>
</div>
</div>

A列
A列
A列
A列
A列
A列
B栏
B栏
B栏
C列
C列
C列
C列
C列

只需调整列，并确保您的总数为12。此外，您还可以找到有关网格系统的更多信息

---

如果你改变了怎么办

到

---

如果你改变了怎么办

到

---

正如佛教徒Beast所说，您只有大约12列可供使用，因此您需要找到一种方法将它们划分为您希望的任何部分

至于对齐A列下的C列，由于Bootstrap自动将其置于B列下，因为它的内容较少，因此空间更大（一个简单的解决方法是向B添加更多内容），因此您可能需要使用clearfix类来重新对齐：

<div class="clearfix visible-xs-block"></div>

---

你可以在这里找到更多关于它的信息。这是一个我对你想看的内容的理解。

正如佛教徒所说，你只有大约12个专栏可以使用，所以你需要找到一种方法将它们分成你想要的任何部分

至于对齐A列下的C列，由于Bootstrap自动将其置于B列下，因为它的内容较少，因此空间更大（一个简单的解决方法是向B添加更多内容），因此您可能需要使用clearfix类来重新对齐：

<div class="clearfix visible-xs-block"></div>

---

你可以在这里找到更多关于它的信息。这是一个我刚刚对你想看的东西的理解。

明白了！我改变了巴克的回答。您必须在最后一列之前添加clearfix div，但要确保它对于中等显示是隐藏的

<div class="container">
    <div class="row">
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>

        </div>
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column B</div>
            <div>Column B</div>
            <div>Column B</div>
        </div>
         <div class="clearfix visible-xs visible-sm hidden-md"></div>
        <div class="col-xs-6 col-sm-4 col-md-2">
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
        </div>
    </div>
</div>

A列
A列
A列
A列
A列
A列
B栏
B栏
B栏
C列
C列
C列
C列
C列

---

谢谢大家花时间来帮助我

明白了！我改变了巴克的回答。您必须在最后一列之前添加clearfix div，但要确保它对于中等显示是隐藏的

<div class="container">
    <div class="row">
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>

        </div>
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column B</div>
            <div>Column B</div>
            <div>Column B</div>
        </div>
         <div class="clearfix visible-xs visible-sm hidden-md"></div>
        <div class="col-xs-6 col-sm-4 col-md-2">
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
        </div>
    </div>
</div>

A列
A列
A列
A列
A列
A列
B栏
B栏
B栏
C列
C列
C列
C列
C列

---

谢谢大家花时间来帮助我

网格加起来应该是12个，就像这样：我知道网格是由12个组成的。也许我使用网格功能是完全错误的，但是除了这个小小的不便，我已经能够让我所有的屏幕大小显示我希望他们如何使用上述方法。（对于较小的屏幕尺寸，通过超过12，列会自动环绕并显示在左侧的列下方。基本上只是使我的布局垂直显示，而不是水平显示。）网格应该加起来是12个，就像这样：我知道网格由12个组成。也许我完全错误地使用了网格功能，但是除了这个小小的不便之外，我已经能够将我所有的屏幕大小都设置为di