我有一个问题，希望 Bootstrap 网格系统可以解决，但我不知道该怎么做。
我希望我的网站在桌面上显示如下:
+--------+------+
|页眉 | |
+--------+ 图片 |
|内容 | |
+--------+------+
在手机上就像这样:
+--------+
|页眉 |
+--------+
|图片 |
+--------+
|内容 |
+--------+
我觉得 Bootstrap 的“拉”和“推”类可以实现这一点，但我已经尝试了很多方法，但无法实现。
谢谢!
最佳答案
应该是可以的。例如这个布局:
<div class="row">
<div class="header col-xs-12 col-sm-6">Header</div>
<div class="image col-xs-12 col-sm-6">Image</div>
<div class="content col-xs-12 col-sm-6">Content</div>
</div>
演示:http://jsfiddle.net/dfsq/KnPd7/
所以基本上它说:
- 对于超小分辨率，让标题扩展到 12 列 (100%)
- 小型、中型和大型 - 6 列 (50%)
对于 .image 和 .content div 依此类推。
col-xx-N 类由媒体查询提供支持。
更新
通过一点魔法，也可以使图像区域扩展到容器的 100% 高度。
演示:http://jsfiddle.net/dfsq/KnPd7/1/
关于html - 在 Bootstrap 中更改列堆栈顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22067831/