Html 小型设备上的引导div对齐中断

我在试着布置反应灵敏的潜水艇。 基本上，我正在努力实现这一观点

对于大型桌面：

 __ _______ __ 
|  |  2.1  |  |
|1 |_______|3 |
|  |2.2|2.3|  |
|__|___|___|__|

对于平板电脑：

    ______________
   |______1_______|
   |     2.1      |
   |______________|
   | 2.2  | 2.3   |
   |______|_______|
   |______3_______|

最后，对于手机等小型设备：

    ______________
   |______1_______|
   |     2.1      |
   |______________|
   |     2.2      |
   |______________|
   |     2.3      |
   |______________|
   |______3_______|

与引导对应的html如下所示：

    <div class="row"> 
        <div class="col-lg-2 col-md-12 col-sm-12">
        </div>
        <div class="clearfix visible-md visible-sm"></div>
        <div class="col-lg-8 col-md-12 col-sm-12">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12"></div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                </div>
                <div class="clearfix visible-sm"></div>
            </div>
        </div>
        <div class="clearfix visible-md visible-sm"></div>
        <div class="col-lg-2 col-md-12 col-sm-12">
        </div>
        <div class="clearfix visible-md visible-sm"></div>
    </div>

---

看起来第3列位于2.3之上。我仍在努力学习bootstrap/css，因此任何建议都将不胜感激

我非常确定，您的手机没有足够大，无法以小型设备网格布局为目标，因为它仅适用于768px以上的媒体。您要查找的类是

列xs

。这里有引导网格系统的详细说明：

我不明白为什么要添加所有不必要的标记。引导处理每个视口的所有浮动和清除

这就是我编写代码以获得所需布局的方式：

<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
    <h1>1</h1>
</div>
<!--end col-->
<div class="col-sm-8">
    <div class="row">
        <div class="col-sm-12">
            <h1>2.1</h1>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
    <div class="row">
        <div class="col-sm-6">
            <h1>2.2</h1>
        </div>
        <!--end col-->
        <div class="col-sm-6">
            <h1>2.3</h1>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
</div>
<!--end col8-->
    <div class="col-sm-2">
        <h1>3</h1>
    </div>
    <!--end col-->
</div>
<!--end row-->
</div>
<!--end container-fluid-->

1.
2.1
2.2
2.3
3.

---

即使我改为xs，也没有解决问题。谢谢你指出这些

<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
    <h1>1</h1>
</div>
<!--end col-->
<div class="col-sm-8">
    <div class="row">
        <div class="col-sm-12">
            <h1>2.1</h1>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
    <div class="row">
        <div class="col-sm-6">
            <h1>2.2</h1>
        </div>
        <!--end col-->
        <div class="col-sm-6">
            <h1>2.3</h1>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
</div>
<!--end col8-->
    <div class="col-sm-2">
        <h1>3</h1>
    </div>
    <!--end col-->
</div>
<!--end row-->
</div>
<!--end container-fluid-->