Twitter bootstrap 当其他网格仍然完整时，将一个引导网格堆叠到另一个引导网格

我正在用Bootstrap建立一个网站。我还是Boostrap的新手，现在还在为响应网格设计而挣扎

所以我的问题是，如果我想在屏幕大的时候有4列的行，但在屏幕中等的时候，我想它变成3列，其中一列叠到另一列（即第3列叠到第4列的顶部）

为了清楚起见，我将举例说明我的设计：

当屏幕较大时：

当屏幕为中等时，变为：

列（内容堆叠到聊天栏列的顶部）：

上面的图片是我用html表格创建的

如何做到这一点？使用纯引导css是否可行？

试试这个标记--

调整浏览器宽度以查看效果

编辑

我想这就是你需要的。查看更新代码段。根据您的意愿调整立柱的高度

边栏
新闻馈送
东西
聊天室

您可以使用这样的嵌套列

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-2">
            sidebar
        </div>
        <div class="col-md-5 col-sm-6">
            newsfeed
        </div>
        <div class="col-md-5 col-sm-2">
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    stuff
                </div>
                <div class="col-md-6 col-sm-12">
                    chatbar
                </div>
            </div>
        </div>
    </div>
</div>

边栏
新闻馈送
东西
聊天室

另外，您没有指定sm/xs屏幕，因此此布局将垂直堆叠在xs屏幕上。您可以通过将

-sm-

更改为

-xs-

---

到目前为止，您有任何代码吗？最好的方法是从中等版面的标记开始，然后根据需要调整大版面的标记。是的。我当然有。我现在已经通过使用jQuery prepend函数实现了它。其思想是将填充移动到第4列，该列在$（window）resize事件时触发，并在原始“stuff”列上使用类hidden md till hidden xs。但我仍然在等待答案，如果使用纯引导css是可行的。谢谢你的建议。是的，只使用引导应该是可能的，但是你需要从一些行/列的标记开始。这很有帮助，但是你应该首先尝试使用HTML/引导代码。谢谢，但这不是我想要的。我已经编辑了我的问题并添加了一些图片。如果你不介意的话，看看这些。太好了！这正是我要找的。非常感谢你D