Вложенная сетка в Bootstrap 4

По заданию нужно, используя сетку Bootstrap 4 сверстать секцию, состоящую из левого блока с классом "col-xl-3 col-lg-4", содержащим только заголовок секции, и правого с классом "col-xl-9 col-lg8 col-md-12", содержащего шесть карточек, шириной в три колонки на разрешении xl. Какие классы bootstrap-grid.css нужно применить к элементам правого блока?

<section class="section section-broadcasts">
      <div class="container">
        <div class="row">
          <div class="col-xl-3 col-lg-4 col-md-12">
            <h2 class="section__title section-broadcasts__title">
              Broadcasts
            </h2>
          </div>
          <div class="col-xl-9 col-lg8 col-md-12">
            <div class="wrapper flex">
              <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="broadcast flex">
                  <h3>
                    Broadcast 1
                  </h3>
                </div>
              </div>
              <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="broadcast flex">
                  <h3>
                    Broadcast 2
                  </h3>
                </div>
              </div>
              <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="broadcast flex">
                  <h3>
                    Broadcast 3
                  </h3>
                </div>
              </div>
              <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="broadcast flex">
                  <h3>
                    Broadcast 4
                  </h3>
                </div>
              </div>
              <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="broadcast flex">
                  <h3>
                    Broadcast 5
                  </h3>
                </div>
              </div>
              <div class="col-xl-3 col-lg-4 col-md-6">
                <div class="broadcast flex">
                  <h3>
                    Broadcast 6
                  </h3>
                </div>
              </div>
            </div><!--/wrapper-->
          </div>
        </div><!--/row-->
      </div><!--/container-->

    </section>

.flex {
  display: flex;
}

.wrapper {
  flex-wrap: wrap;
}