使用引导程序更改div的排序

Question

我想知道如何使用引导程序3创建以下布局。在小尺寸的屏幕上（以及以上），我需要以下内容（其中X和Y div是6列，在Z格为12列）：

XXXXXX YYYYYY 

ZZZZZZZZZZZZZ 

和一个额外的小屏幕，我需要以下（其中每个格为12列）上：

XXXXXX 

ZZZZZZ 

YYYYYY 

我遇到的问题是弄清楚如何让Y div在额外的小屏幕上与Z div切换顺序。

Answer 1

你要找的是不可能的 - 对不起。全宽元素的位置不能改变。如果zzz和yyy分成两半，那也许是可能的。

我会做什么 - 但也取决于内容 - 是复制一个元素，并使用可见性类来隐藏/显示所需位置。

...否则使用jquery和append函数。

Answer 2

我不认为你将只能用CSS获得这种行为。我建议使用window.onresize事件来触发resize函数，并使用jQuery将html附加到不同的元素。尝试使输出列在小本jsBin：

JSBIN

Answer 3

虽然它可能不是完全按照您的要求，您是否尝试过根据屏幕尺寸复制元素，然后为相应的屏幕尺寸启用元素的每个版本？ http://getbootstrap.com/2.3.2/scaffolding.html#responsive - 然后向下滚动至响应应用程序类别