【CSSレスポンシブデザイン】スマホ表示時に画像下にある説明文を、PC表示時は画像横に移動したいです。

やりたいことは、画像のとおりです。

■　スマホ表示時のデザイン

■　PC表示時のデザイン

PC表示のときに、説明文を画像のように右側に移動するようにしたいのですが、CSSでの実装方法がわかりません。どなたか解決できる方、ご教示いただけるととても助かります。
どうぞよろしくお願い致します。

HTML

1 <div class="wrapper"> 2 <div class="flex"> 3 <img src="https://placehold.jp/90x90.png"> 4 <div class="test"> 5 <div>山田たろう</div> 6 <div class="desc">説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</div> 7 </div> 8 </div> 9 </div>

CSS

12.wrapper {3 max-width: 500px;4 width: 100%;5 background: grey;6 border: 3px solid #ccc33c;7}8 9.flex {10 display: flex;11}12 13.desc {14 background-color: aqua;15}16