【CSS】display: flex;でPCとSPで要素の内容を変える方法

Flexboxで下記のようなレスポンシブレイアウトにする場合、どのようにするのが良いのでしょうか？
SPでのみボタンを100％幅にしたいのですが、うまくいきません。

HTML
1<div class="item">
2　　<img class="image" src="hoge">
3 <div class="information">
4  <h2>タイトル</h2>
5  <p>説明テキスト説明テキスト説明テキスト...</p>
6  <button>ボタン</button>
7 </div>
8</div>

css
1.item {
2 display: flex;
3}

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

回答1件

そのようなレイアウトなら、FlexよりGridの方が適しています。

CSS Grid Layout を極める！（基礎編） - Qiita

一例

html
1<div class="item">
2  <img class="image" src="https://picsum.photos/900/600">
3  <div class="information">
4    <h2>タイトル</h2>
5    <p>説明テキスト説明テキスト説明テキスト...</p>
6  </div>
7  <button>ボタン</button>
8</div>

css
1.item {
2  width: 100%;
3  display: grid; 
4  grid-template-rows: auto 40px;
5  grid-template-columns: 40% 1fr;
6  gap:20px;
7}
8.item .image {
9  width: 100%;
10  grid-column: 1 / 2;
11  grid-row: 1 / 3;
12}
13.item button {
14  grid-column: 2 / 3;
15  grid-row: 2 / 2;
16}
17@media screen and (max-width:480px) {
18  .item .image {
19    width: 100%;
20    grid-column: 1 / 2;
21    grid-row: 1 / 2;
22  }
23  .item button {
24    grid-column: 1 / 3;
25    grid-row: 2 / 3;
26  }
27}