このレイアウトをスマホ（検証）で見たときに見た目が崩壊するので解決したい。

Question

HTML

<section class="flow">
      <div class="container">
        <div class="flow-box flex">
          <p class="flow-box__number">01</p>
          <p class="flow-box__left">お問い合わせ</p>
          <p class="flow-box__right">まずはフォームまたはお電話からお申し込みください。</p>
        </div>
        <div class="flow-box flex">
          <p class="flow-box__number">02</p>
          <p class="flow-box__left">ヒアリング</p>
          <p class="flow-box__right">現在の学習状況やTOEFLスコア、目標のスコアをお聞きします。
          </p>
        </div>
        <div class="flow-box flex">
          <p class="flow-box__number">03</p>
          <p class="flow-box__left">学習プランのご提供</p>
          <p class="flow-box__right">目標達成のために最適な学習プランをご提案致します。
          </p>
        </div>
        <div class="flow-box flex">
          <p class="flow-box__number">04</p>
          <p class="flow-box__left">ご入会
          </p>
          <p class="flow-box__right">お申込み完了後、レッスンがスタートします。
          </p>
        </div>
      </div>
    </section>

SASS

.flow {
  padding: 50px 0;
}

.flow-box {
  width: 100%;
  height: 64px;
  margin: 10px 0;
  align-items: center;
  // line-height: 4rem;
  background-color: #F8F8F8;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    left: 32%;
    width: 1px;
    height: 35px;
    background: silver;

    @include tablet() {
      left: 39%;
    }
  }

  &__number {
    // padding: 20px 0;
    line-height: 4rem;
    padding: 0 20px;
    @include rem(16);
    font-weight: bold;
    color: #fff;
    background-color: $color-yellow;
  }

  &__left {
    width: 270px;
    padding-left: 20px;
    padding-right: 85px;
    @include rem(18);
    color: $color-blue;
    font-weight: bold;
  }

  &__right {
    flex: 1;
    @include rem(16);
  }
}

解決するために行った事

・flex: 1;を&__rightに使った。
→文字の先頭がズレないようにするため。

・width:270px;を&__leftに使った。
→上記と同じ理由。

・height:64px;を.flow-boxに使った。
→これがないとスマホで見たときに.flow-boxが巨大化する。

・&__leftのwidthを大きく減らしたりしてみた。
→右側の文字が枠に収まる為にやったが、綺麗にならない。

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

パソコン版は問題なく綺麗に表示されます。

スマホ版を表示するとこうです。

パソコン版の画面をそのまま小さく、右側の長文テキストは二段に改行させたいです。

Comments

[hatena19]

$color-yellow $color-yellow
@include rem(18)
@include tablet()
の定義部分のコードも提示してください。
それがないと検証できません。
あるいは、コンパイル後のコードを提示したほうが回答がつきやすいでしょう。

Answer 1

参考サイトのように画面サイズが小さくなれば二段になるようにしてみてはどうでしょうか？

Comments

[You]

回答ありがとうございます。
元サイトの見た目がPC版同様、横並びとなっておりますがrightの長文に関しましては二段でまとめられています。

[meoto2408]

文字が小さくなったりして横並びになっているのですか？

[You]

はい、左様でございます。
フォントサイズにつきましてはremを活用しているので画面が小さくなるにつれて自動で文字が小さくなるようにしています。

[You]

すみません、一回目の返信を編集させて頂きました。

[meoto2408]

「元サイトの見た目がPC版同様、横並びとなっておりますので一段でまとめられるようにしたいです。」
ということだと、`@media screen and (max-width:XXXpx)`などを使ってデザイン自体を変えることしか私には思いつきません...すみません