html - bootstrap div对齐在小型设备上中断

我正在尝试布局响应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>

对于台式机和平板电脑保护套，它按预期工作。但是在小的情况下布局被打破了。它显示了这样的东西

    ______________
   |______1_______|
   |     2.1      |
   |______________|
   |     2.2      |
   |______________|
   |______3_______|
   |_____2.3______|

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

最佳答案

我非常确定您的手机不够大，无法用于小型设备的网格布局，因为它仅适用于宽度超过768像素的媒体。您要查找的课程是col-xs。在这里，您具有引导网格系统的详细说明：http://getbootstrap.com/css/#grid