Twitter bootstrap I’；我没有掌握引导’；两列对一列的网格？

我一直在看一些文章，但我没有真正掌握这个概念

假设我有一个用于中型和大型设备的两列网格。在第一列中有一些文本，在第二列中有一个图像。当浏览器处于small和x-small模式时，我希望网格为一列，图像位于文本顶部

首先，我不能100%确定我是否理解如何使用相同的网格代码将网格从两列减少到一列，即使这样做了，因为图像最初位于第二列，它不会移动到第一列文本的下方吗

---

因此，目前我唯一能想到的处理方法是以我希望看到的方式创建两个网格，然后根据浏览器端隐藏其中一个网格。基于浏览器维护同一页面的两个部分感觉就像是双重工作。

您可以使用引导

push

pull

类在

md

和

lg

屏幕上反转列顺序。在

sm

和

xs

宽度上，列将按其自然顺序堆叠

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-push-6"><img src=".."></div>
        <div class="col-md-6 col-md-pull-6">Some text</div>
    </div>
</div>

一些文本

---

因为我不知道推/拉，所以当你把我带到这里时，我就开始研究。然后我来到了这个链接，它有助于理解列顺序。这是StackOverflow和a谁能看看这个plunker，告诉我我做错了什么？阅读这些文章，我似乎应该首先设计手机，这就是我所做的，而且看起来是正确的。但是，如果您将plunker展开到一个大窗口，它会将图像向右拆分，文本向左拆分，但文本不会拉到顶部，因此它与图像处于同一水平面，也会稍微向左偏远。