使用引導程序更改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 - 然後向下滾動至響應應用程序類別