flexboxで崩れないように2行に折り返したい

Question

実現したいこと

1366px(pc)から375px(sp)
へサイズを変えるときに横並び１列から
２列に、崩れないようにしたいです。

1366px(pc)の表示
１２３４

375px(sp)の表示
１２
３４

前提

1052pxあたりからスマホ画面375pxまでの間で

１２３
4

のような崩れた表示になってしまいます

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

https://i.gyazo.com/83a10e32388088226f28016e239617ff.png

該当のソースコード

    <ul class="charm-circle">

      <li class="circle">
        <div class="charm-b"><span class="circle-text">魅力</span><span class="circle-number">1</span></div>
        <p class="circle-comment">医師による<br>カウンセリング</p>
      </li>

      <li class="circle">
        <div class="charm-b"><span class="circle-text">魅力</span><span class="circle-number">2</span></div>
        <p class="circle-comment">安心の<br>定額料金</p>
      </li>

      <li class="circle">
        <div class="charm-b"><span class="circle-text">魅力</span><span class="circle-number">3</span></div>
        <p class="circle-comment">全室個室を<br>お約束</p>
      </li>

      <li class="circle">
        <div class="charm-b"><span class="circle-text">魅力</span><span class="circle-number">4</span></div>
        <p class="circle-comment">東京駅から<br>徒歩３分</p>
      </li>
    </ul>

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3.3rem;
  position: relative;
  margin-top: 9rem;
  margin-bottom: 3rem;

}

@media (min-width: 768px) {
  ul.charm-circle {
    column-gap: 13.5rem;
    margin-top: 6rem;
    margin-bottom: 5.3rem;
  }
}


ul.charm-circle::before {
  content: "";
  display: block;
  width: 92%;
  height: 1px;
  background: #606060;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  ul.charm-circle::before {
    display: none;
  }
}

.charm-b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 15.6rem;
  height: 15.5rem;
  margin: 0 auto;
  border: 3px solid rgb(0, 151, 167);
  border-radius: 50%;
  color: rgb(0, 151, 167);
}

@media (min-width: 768px) {
  .charm-b {
    width: 16rem;
    height: 16rem;
    line-height: 1.3;
  }
}

p.circle-comment {
  text-align: center;
  font-size: 2rem;
  line-height: calc(35/20);
  padding-top: 1rem;
  padding-bottom: 2.4rem;
}

@media (min-width: 768px) {
  p.circle-comment {
    text-align: center;
    font-size: 2.4rem;
    padding-top: 0.8rem;
    padding-bottom: 0;
  }
}

span.circle-text {
  font-size: 2.4rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
}

span.circle-number {
  font-size: 4.8rem;
}

試したこと

flex-wrap: wrap;を使ってます

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

アドバイスよろしくお願いします

Answer 1

回答の前に、今後は下記の点を考慮して投稿してください。

画像はgyazoのリンクではなく、
この掲示板は画像をアップロードして表示できますので、それを利用してください。
下記のように掲示板内に表示できます。

あと、CSSのコードブロックの記述が毎回、間違っています。下記のように```の後に言語名を記述して改行してください。

　```css(改行)
ここからＣＳＳコードを書き始める

　```
正しく記述出来たら、下記のような表示になるはずです。投稿するときにプレビュー画面をみて正しく表示できているか確認してください。

ul.charm-circle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3.3rem;
  position: relative;
  margin-top: 9rem;
  margin-bottom: 3rem;
/* 以下略 */

質問内容をもう少し具体的に伝わるように修正してください。

現状のCSSだと上記の画像のように表示されると思いますが、ご希望のレイアウトはどのようなものでしょうか。
現状はpcからspまで幅がせまくなるにつれて、４列→３列→２列→１列となりますが、４列→２列→１列 というように３列にならないようにしたいということでしょうか。

実装例

あくまで、考え方のサンプルですので、実際のページで確認しながら、各値は調整してください。

@media (min-width: 768px) {
  ul.charm-circle {
    column-gap: 13.5rem;
    margin-top: 6rem;
    margin-bottom: 5.3rem;
    width: 50rem;   /* ２列になるよう幅を制限 数値は調整してください */
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1399px) { /* ４列になるブレークポイント */
  ul.charm-circle {
    width: 100%;　 /* 幅の制限を解除 */
  }
}

flexレイアウトでの実装例ですが、gridレイアウトを使えば明示的に列数を指定できますので、よりシンプルに直感的に実装できると思います。

Comments

[chogemi]

ご丁寧にご教示いただきありがとうございます。
次回より手順を踏んで質問させていただきます。

修正内容ですが
1366pxから375pxサイズの間で
4列→2列というようにしたいです。

3列にならないようにしたい。という
ことで認識あっていると思います。

魅力1 魅力2 魅力3魅力4
↓
魅力1魅力2
魅力3魅力4

この二パターンにしたいです。

[hatena19]

提示のコードでサンプルを作成して確認すると、1366px以下で３列ではなく、1700px以下から３列になりますので、提示されていない部分もあるように思えます。
現状、1366px以上は４列、1366px以下で3列になるのなら、
対処法としては、メディアクエリで、1366pxから375pxの間で、ul.charm-circle の幅を２列になるように制限することになります。

実装例を回答に追記しました。

[chogemi]

不備があったようで失礼いたしました。
表示が崩れているところをポイントでメディアクエリで指定するのですね。
ありがとうございます。