我一直在看一些文章,但我并没有真正理解这个概念。
假设我有一个用于中型和大型设备的双列网格。在第一列中有一些文本,在第二列中是一个图像。当浏览器小而且x小时,我希望网格是一列,文本顶部是图像。
首先,我不是100%确定我理解如何使用相同的网格代码将网格从两列减少到一列然后即使它确实如此,因为图像最初位于第二列,不会它移动到第一列中的文本下方?
因此,我现在能够考虑如何处理此问题的唯一方法是按照我希望的方式创建两个网格,然后根据浏览器方面隐藏其中一个。这只是基于浏览器维护同一页面的两个部分的双重工作。
答案 0 :(得分:3)
您可以使用Bootstrap 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>