レスポンシブデザインの一番左の列に移動

Question

私は大学の新聞のウェブサイトのデザインを変更しようと努力しており、デザインはiPadにうまく収まるようになっています。私は今、1列のレイアウト（スマートフォン用）に切り替えようとしています。

問題は、単一列のレイアウトでは、右の列は、左の列の上に行かなければならない、ということです。私は右の列のコードが左の列の前に書かれている場合、これを行う方法を知っていたが、残念ながらそうではありません。

左の列を右の列の下に移動するにはどうすればよいですか？ HTMLコードの列の順序を切り替えるにはJavaScriptを使用する必要がありますか？ありがとう！

EDIT：幅がsomeNumberのときに見えないDIVを持つことができます。私は冗長である必要はありません。

Answer 1

CSSの唯一の解決策は、デフォルトのデザインとして最小の画面から開始し、メディアクエリを使用して画面サイズが増加するにつれて向上させることです。一番小さいスクリーンから始めて、バナー、一次ナビゲーション、メインコンテンツ（右の列）、横（左の列）、および（恐らく）フッターの上の画像に対して、マークアップを正しい順序で最初に配置します。メディアのクエリで追加のCSSが適用されると、メインコンテンツを右に浮かして、別のものを左に置くことができます。要素は、より小さいまたは大きい画面用に正しく配置されます。

Answer 2

CSSは、ドキュメントフローから要素を取り出して、任意の方法でどこにでも配置できます。しかし、新しい文書フローを作成することはできません（つまり、要素を並べ替えることはできません）。ある要素を他の要素に対して相対的に配置するか、絶対に両方の要素を配置する必要があります。

あなたはJavascriptにアクセスでき、優雅な衰退を心配していない場合は、2つのdivの.innerHTMLを入れ替えることもできます。

Answer 3

私が考えることができる最も簡単な方法は、DOMのあるdivから別のdivへ右の列コンテンツを削除するjQuery（JavaScriptライブラリ）です。これにより、divをオンザフライで作成して削除することができるので、最後に冗長性はありません。

これがあまりにも漠然としている場合は、コメントと例を追加します。