flexでレスポンスに対応したい

画面が小さくなった時に <div class="flex flex-direction gap-10">の中のの年齢と好きな食べ物、趣味とで分けたいです。
現在だと年齢と好きな食べ物と趣味が横の並んでいる状態ですが画面が小さくなった時に年齢の下に好きな食べ物と趣味を配置したいです。
@media screen andを使ってどのように記述したら実現できるのでしょうか？

<div class="flex">
  <p>名前</p>
  <div class="flex flex-direction gap-10">
    <div>
      <p>住んでるところ</p>
      <p>好きな国</p>
    </div>
    <div class="flex gap-10">
      <p>年齢</p>
      <p>好きな食べ物</p>
      <p>趣味</p>
    </div>
  </div>
</div>

scss
div,
span {
  &.flex {
    display: flex;
  }
  &.flex-direction {
    flex-direction: column;
  }
  &.gridgap-10 {
    gap: 10px;
  }
}
  @media screen and (min-width: 450px) {
  }

hatena19

2020/10/28 03:10

> 現在だと年齢と好きな食べ物と趣味が横の並んでいる状態ですが提示のコードだとそこは縦に並んでいると思いますが。 flex-direction: column; が効いてますので。

dsfdsf

2020/10/28 03:42

すいません。htmlとcssを修正しました。間違えていました。申し訳ないです

行動規範の内容に同意します

回答1件

質問が変更されたのでそれに合わせてコード修正しました。

html
1<div class="flex">
2  <p>名前</p>
3  <div class="flex flex-direction gap-10">
4    <div>
5      <p>住んでるところ</p>
6      <p>好きな国</p>
7    </div>
8    <div class="flex gap-10">
9      <p class="age">年齢</p>
10      <p>好きな食べ物</p>
11      <p>趣味</p>
12    </div>
13  </div>
14</div>

scss
1div,
2span {
3  &.flex {
4    display: flex;
5    flex-wrap: wrap;
6  }
7  &.flex-direction {
8    flex-direction: column;
9  }
10  &.gridgap-10 {
11    gap: 10px;
12  }
13}
14
15.age {
16  flex: 0 0 100%;
17  @media screen and (min-width: 450px) {
18    flex: auto;
19  }
20}