ほんっとにはじめてのHTML5とCSS3
【18-2】Flexbox内のボックスの配置方法を指定しよう サンプル3
メディアクエリで、ビューポートが幅400px以下の時 flex-direction: column にしています。
各Flexboxアイテムはブロックレベルになって縦に並びます。
各Flexboxアイテムの高さを統一するには、min-height を指定します。
CSS
div#container {
display:flex;
flex-wrap:wrap;
justify-content:space-between}
div#container section {flex:1 0 100px}
@media only screen and (max-width: 400px){
div#container {flex-direction:column} /*親のFlexboxコンテナに*/
div#container section {min-height:200px} /*子のFlexboxアイテムに*/
}