How to put div under content when resize window?

Question

Lets say that I have simple html (+css) page with header, two divs below (left and right) and footer below them. I want to make right div go under left one when resize window. I have two examples of this effect:

EXAMPLE #1 - this is simple example but it's 100% what I am thinking of and here is another, more complicated but good too: EXAMPLE #2

How is this effect called? Do I need JavaScript to make it?

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/

Answer 2

Twitter made this awesome framework for responsive html design: http://getbootstrap.com/ It's very simple to use and save a lot of work.