我正在對我的大學報紙網站進行重新設計，並且設計得非常適合iPad。我現在試圖將其切換到一個列布局（智能手機）。在響應式設計中移動最左側的列
的問題是，在單欄佈局，右列必須左列以上。如果右列的代碼寫在左列之前，我會知道如何做到這一點，但不幸的是它不是。
如何移動右列下方的左列？我是否需要使用Javascript切換HTML代碼中的列順序？謝謝！
編輯：我意識到我可以有一個DIV，當寬度> someNumber時是不可見的。我寧願不必多餘，雖然...
CSS唯一的解決方案是以最小的屏幕作爲默認設計，然後隨着使用媒體查詢屏幕尺寸增加而增強。首先從最小的屏幕開始，按照正確的順序放置標記 - 橫幅，主要導航，主要內容（右側列），旁側（左側列）和（可能）頁腳上的圖像。由於媒體查詢應用了額外的CSS，因此您可以將主內容右鍵懸浮並保留 - 剩餘的元素正確放置在較小或較大的屏幕上。
CSS可以從文檔流中取出元素，並以任何你想要的方式將它們放在任何地方。但它不能創建一個新的文檔流（即它不能重新排序元素）。您需要將一個元素相對於另一個元素進行定位或將它們定位在絕對位置。
如果您有權訪問Javascript並且不關心優雅降級，您也可以交換兩個div的.innerHTML。
要做到這一點，您需要知道右列佔據的垂直像素數量嗎？ – 2012-01-13 02:25:40
是的，我不確定是否讓左邊的相對右邊和右邊的絕對（這將避免知道右邊的高度） – 2012-01-13 02:39:58
我能想到的最簡單的方法是使用jQuery（一個javascript庫）將正確的列內容從DOM中的一個div移除到另一個div。這允許您創建和移除div，因此最終沒有冗餘。
如果這太含糊了，評論，我會添加一個例子。
謝謝！我一直在想，但我寧願不必依靠JavaScript。如果我找不出好人的解決方案，我可能會和你一起去。謝謝！ – 2012-01-13 03:14:03
非常聰明 - 我終於明白爲什麼人們想要先爲手機編碼。 – 2012-05-09 19:40:19