This first example shows how the left-hand column disappears under the main content as the page width shrinks. The logo shifts from the usual top left to be centred and the main links align under this logo.
The images also scale all the way down to a 260 pixel width!
This second example keeps the extra right hand column down to 410 pixels and only at the small sizes does the logo pop and centre itself.
This following is an example of using media queries to take advantage of widescreen monitors all the way down to mobile widths. Notice how the main navigation goes from eight links down to four links and how the extra info is pruned away.
The final example shows how images are scaled and removed to simplify the layout.
You'll notice that all these four examples have set there media query points at different widths. Resulting in style switching at different browser widths.
Check out the previous post about responsive web design to see a basic explanation of how to do this and some suggested widths.
Comment away on what widths you set for responsive web design below..