デバイスの解像度により、ブラウザの画面サイズが変わります。それにあわせたレイアウトに切り替えます。ブラウザの横サイズを変更して確認してください。
ブラウザの画面横サイズが
700px以下の場合：ヘッダー、メイン、2番目の縦組。
701px〜900pxの場合：ヘッダーの下にメイン、2番目の横2カラム。
901px以上の場合：ヘッダーの下にメイン、2番目、3番目の横3カラム。
バックグラウンドの色も変わります。
現在のブラウザ画面横幅：ピクセル
media queryに対応していない場合、専用のcssを読込めないので、バックグラウンドは白、各カラムは縦組になります。