PC表示とスマホ表示時の画像配置を自動で変える

前提

pc表示では画像が1行目に5つ2行目に4つ
スマホ表示では画像が1～3行目に3つずつ
みたいな感じで画面サイズによって自動で配置が換わるようにしたいです。
バルーンキッチンのusecaseの「結婚式」「誕生日」などのイラスト欄のようにしたいです。
リンク内容https://www.balloon-kitchen.com/?utm_source=yahoo&utm_medium=cpc&yclid=YSS.1001013012.EAIaIQobChMIuK-wts3F-QIVw8qWCh1T-AsOEAAYASAAEgLtb_D_BwE

実現したいこと

画面サイズに合わせて画像サイズは変えずに配置だけ変わるようにしたい。

発生している問題・エラーメッセージ

・改行が1段目3枚、2段目1枚、3段目3枚みたいな感じになる（上から詰めてくれない） ・左右がそろわない ・画像同士の間の間隔がバラバラになる

該当のソースコード

今回の質問の該当するソースコードが分からないので質問させて頂いてます。 的外れなことを言っていたらすみません。

試したこと

・<wbr>を使った改行（HTMLにCSSを入れて行った）
・バルーンキッチンのHTMLを見て<li>使用したもの
↳調べてやってみたが、使い方がよく分からなかった。

補足情報（FW/ツールのバージョンなど）

カラーミーショップで使います。