ボックス①(main)
HTMLの記述順では最初のdiv要素。
3段組を構成する場合は、メインの内容を中心に配置したいケースが多いでしょう。しかし、メインの内容はHTML内ではできるだけ先に記述したいものです。最も重要なコンテンツを最初に読み込ませることで表示を速くする方が、閲覧者の体感待ち時間を減らせますから。
※このサンプルを意図通りに表示するためには、Edge、IE11以降、Firefox28以降、Chrome29以降(※21以降)、Safari9以降(※6.1以降)、Opera17以降(※12.1以降)のバージョンが必要です。(ベンダープレフィックスを使えば「※」に示すバージョン以降でも表示可能です。) 詳しくは解説記事をご参照下さい。
このサンプルでは、「ヘッダ部分」→『「ボックス①(main)」→「ボックス②(sideA)」→「ボックス③(sideB)」』→「フッタ部分」の合計5つのブロックがあります。
3つのボックスのHTMLソース内での記述順は、①→②→③です。
ブラウザの画面(ウインドウ)幅が641px以上の場合は、3つのボックスが横に並ぶ段組構造を作ります。このとき、ボックスは②→①→③の順序で並びます。
しかし、640px以下の場合は、3つのボックスは縦に並びます。その際は①→③→②の順序で並びます。
HTMLの記述順では最初のdiv要素。
3段組を構成する場合は、メインの内容を中心に配置したいケースが多いでしょう。しかし、メインの内容はHTML内ではできるだけ先に記述したいものです。最も重要なコンテンツを最初に読み込ませることで表示を速くする方が、閲覧者の体感待ち時間を減らせますから。
HTMLの記述順では2番目のdiv要素。
メインメニューは段組構成では左端に置きたいですが、縦に並ぶモバイル用レイアウトでは（コンテンツを先にするため）最後に配置した方が良いでしょう。
HTMLの記述順では3番目のdiv要素。
補足コンテンツは段組構成では右端に置きたいですが、縦に並べる場合は「メインコンテンツ」の直後に置く方が良いでしょう。