Airbnbの模写中です。bootstrapを使ったレスポンシブ対応がうまくできません

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

「いつも完璧な贈り物」の部分のレスポンシブ対応にしようと試みていますが、
写真のような状態になり縦に並びません。
どう対応したらいいのかご教授お願い致します。

該当のソースコード

  <div class="container">
    <div class="main-wrapper">
      <div id="main-features">
        <h1>いつも完璧な贈りもの</h1>
        <div class="row">
          <div class="flex">
            <div class="col-sm-12 col-md-12 col-lg-4">
              <div class="f-section">
                <i class="far fa-envelope fa-3x my-blue"></i>
                <h3>簡単に使える</h3>
                <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-4">
              <div class="f-section">
                <i class="fas fa-stopwatch fa-3x my-blue"></i>
                <h3>有効期限なし</h3>
                <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-4">
              <div class="f-section">
                <i class="fas fa-globe fa-3x my-blue"></i>
                <h3>忘れられない旅</h3>
                <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>