響應4節佈局

Question

我有一個網站，有一個主要部分，底部欄包含按鈕，然後兩個信息部分。當設備處於橫向模式時，我希望主要部分位於左側，兩個額外部分垂直堆疊在右側，底部橫條堆疊在底部。像這樣：

當設備保持肖像，我想主要部分是在中間，兩個額外的部分垂直上方和底部欄是在底部堆積。像這樣：

在每一個，主要部分需要調整大到它可以（圖片有點誤導）。我已經能夠使用表格自己實現每個表格，但是，我希望避免在屏幕旋轉時必須擁有兩個副本，並且只隱藏一個或另一個副本。

有沒有一個很好的方法來完成這項工作？我已經在使用jQuery，所以我並不反對使用它，但理想情況下，如果我可以在純CSS中做到這一點，那就太棒了。

P.S.這是一個網絡應用程序，所以它需要填充整個屏幕，沒有任何滾動條。

Answer 1

你可以用CSS解決這個問題，沒問題。

定義您的第二個版式的分辨率，並使用該分辨率的媒體查詢將您的主區域左側和兩個信息區域右側浮動。對所有的人使用％寬度。

更簡單的是使用Twitter Bootstrap並使用它們的網格定義這些佈局。