javascript - ウィンドウのサイズを変更するときにコンテンツの下にdivを配置する方法は?

Question

ヘッダー、その下の 2 つの div (左右)、およびその下のフッターを含む単純な html (+css) ページがあるとします。ウィンドウのサイズを変更するときに、右の div を左の div の下に移動させたい。この効果の例が 2 つあります。

例 #1 - これは単純な例ですが、私が考えていることは 100% です。これは別の、より複雑ですが良い例です: 例 #2

この効果はどのように呼ばれますか? 作るのにJavaScriptは必要ですか？

Answer 1

This effect is called responsive web design which uses media queries to target specific device sizes.

You can learn more about how to use and work with media queries by watching these intro videos:

https://www.youtube.com/watch?v=TPmb7xHCLO0

https://www.youtube.com/watch?v=F_fhyXUH_To

Also, here is a great article that can save you a lot of time and frustration:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/