如何在小屏幕上將兩個側邊欄移動到內容以下？

Question

這裏是我的codepen減少測試用例：http://codepen.io/RonStrilaeff/pen/pKBdf

我有我的網頁與他們之間的內容自動調整大小...的作品外邊緣的兩個固定寬度的側邊欄。要求一邊是一邊是正確的。

但是，當屏幕變小時，我想將側邊欄向內下推。這基本上與我的演示相反。 :-)

我想知道什麼樣的CSS魔術我必須做我的媒體查詢內部，使其表現這種方式？我認爲它有一些簡單的浮法或明確，我還沒有掌握。或者，也許我需要以不同的順序開始我的div在html中。

任何幫助，非常感謝。

Answer 1

Chris Coyier的網站和論壇收集的一些原則幫助我。

這裏是我與（第一codepen的叉）去溶液：

http://codepen.io/RonStrilaeff/pen/oefav

• 把內容的div第一與特定邊緣匹配邊欄的寬度
• 通常所作的側邊欄在包含兩個側邊欄和內容的包裝中固定（頂部，左側或右側）以及無論任何寬度需要的內容，使每個側邊欄靜態並向左或向右浮動（由於源順序，下面的內容是自然的）同時刪除相應的內容保證金

瞧！

我對此非常滿意，因爲它並不涉及太多的代碼，而且看起來很標準......即：沒有「技巧」:-)