非常にシンプルなHTMLで、Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニックを紹介します。 スマホ時はサイドバーを下に落とすレイアウトなど、利便性が高いと思います。 Using flexbox to make responsive widgets without media queries. デモでは、デスクトップの2カラムでは右のカラム(ピンク)が300px固定で、左のカラム(グリーン)が最小幅400pxを下回ると、垂直方向に積み重なります。積み重なった時は、2つのカラムは100%で表示されます。
![Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/78b90eca0451eb5ea3734e94d8df887d030f9c2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061601.png)