更改引导程序中的列堆栈顺序

Question

我有一个问题，我希望Bootstrap网格系统可以解决，但我无法弄清楚如何做到这一点。

我希望我的网站在桌面上显示如下： +---------+-------+ | Header | | +---------+ Image | | Content | | +---------+-------+

在移动设备上这样： +---------+ | Header | +---------+ | Image | +---------+ | Content | +---------+

我觉得这可以通过Bootstrap的“拉”和“推”类来实现，但我已经尝试了很多东西而且无法实现它。

谢谢！

Answer 1

应该可以。例如这个布局：

<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％）

{p>等.image和.content div。

类col-xx-N由媒体查询提供支持。

UPD

通过一点魔力，它也可以使图像区域延伸到容器的100％高度。

演示：http://jsfiddle.net/dfsq/KnPd7/1/

Answer 2

在我的Idea Bootstrap中，如果你编写自己的类检查“

，那么这就变得更容易了

`http://jsfiddle.net/tasaeed/ZSas7/1/`