#column1

このカラムの横幅は100%です。可変幅です。

このテンプレートでやっていること

親要素#container

display:flexを設定してFlexboxでレイアウトしています。

子要素#column1と#column2

flex:○○を設定して横幅に関する設定をしています。

order:○○を設定して表示される順番を決めています。

PC向けレイアウトで#column1と#column2の横幅を変更したい場合

このテンプレートでは#column1の横幅が可変幅で#column2の横幅は固定幅です。親要素#containerの横幅から#column2の横幅を引いた値が#column1の横幅になります。

なので親要素#containerの横幅が1200pxの場合、子要素#column2の横幅を300pxにしたら#column1の横幅は900pxになります。

#column2

このカラムの横幅は100%300pxです。