Как я могу встроить обзоры yelp, чтобы они соответствовали сетке Bootstrap

Question

По какой-то причине, когда я пытаюсь встроить yelp-обзоры (на самом деле Instagram и Twitter тоже встраиваются), они не работают в системе сетки bootstrap.

Две проблемы:

1. Когда экран становится меньше, как раз перед тем, как он схлопывается до размера сотового телефона, карты накладываются друг на друга.

2. Когда экран очень большой, карты не по центру и держатся влево.

Я не уверен, следует ли мне пытаться использовать CSS для решения этих задач или редактировать фактический код вставки yelp.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <div id="yelp-reviews" class="row p-5" style="background-color: rgb(242,60,64);">
    <h1>Find out why customers on yelp love us!</h1>
    <div class="row d-flex">
      <div class="col-sm-4">
        <span class="yelp-review" data-review-id="ItONUoCd7PizuN_3mTX3TQ" data-hostname="www.yelp.com">Read <a href="https://www.yelp.com/user_details?userid=cmDcVB0Qgtgtg8vvVbZWqg" rel="nofollow noopener">Stephen G.</a>'s <a href="https://www.yelp.com/biz/wok-about-bar-and-grill-leavenworth?hrid=ItONUoCd7PizuN_3mTX3TQ" rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/-6hLd3blIpxjSQt038fshA" rel="nofollow noopener">Wok About Bar & Grill</a> on <a href="https://www.yelp.com" rel="nofollow noopener">Yelp</a>
          <script async="async" src="https://www.yelp.com/embed/widgets.js" type="text/javascript"></script>
        </span> </div>
      <div class="col-sm-4">
        <span class="yelp-review" data-review-id="5n-bs2W6VwH1tHurJj4Q2g" data-hostname="www.yelp.com">Read <a href="https://www.yelp.com/user_details?userid=oVYHm12J3wmRYKGA6SedtA" rel="nofollow noopener">Geordie R.</a>'s <a href="https://www.yelp.com/biz/wok-about-bar-and-grill-leavenworth?hrid=5n-bs2W6VwH1tHurJj4Q2g" rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/-6hLd3blIpxjSQt038fshA" rel="nofollow noopener">Wok About Bar & Grill</a> on <a href="https://www.yelp.com" rel="nofollow noopener">Yelp</a>
          <script async="async" src="https://www.yelp.com/embed/widgets.js" type="text/javascript"></script>
        </span> </div>
      <div class="col-sm-4">
        <span class="yelp-review" data-review-id="eKK8Cltv51Rd9AHTAwTelw" data-hostname="www.yelp.com">Read <a href="https://www.yelp.com/user_details?userid=2iJsaZgrMSqMw-fZYl4LTg" rel="nofollow noopener">Huong L.</a>'s <a href="https://www.yelp.com/biz/wok-about-bar-and-grill-leavenworth?hrid=eKK8Cltv51Rd9AHTAwTelw" rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/-6hLd3blIpxjSQt038fshA" rel="nofollow noopener">Wok About Bar & Grill</a> on <a href="https://www.yelp.com" rel="nofollow noopener">Yelp</a>
          <script async="async" src="https://www.yelp.com/embed/widgets.js" type="text/javascript"></script>
        </span>
      </div>
    </div>
  </div>