(Может быть) Прекратить запуск цикла foreach, чтобы исправить структуру Bootstrap

Question

Я пытаюсь получить и отобразить данные, используя цикл foreach, но сталкиваюсь с проблемами при получении правильной эстетики с Bootstrap 4.

Вот макет макета, который я пытаюсь достичь :

Вот моя текущая разметка :

<div class="row justify-content-center">
  <div class="col-12 d-flex flex-row">

    <?php 
      $i = 0;
      foreach( $col as $item ){
        $itle=$item->childNodes[1]->nodeValue;
        if(++$i > 4) break;
    ?>
    
    <?php if ($i == 1) { ?>
    <div class="large d-flex flex-column">
      <span class="title"><?php echo $title; ?></span>
    </div>
    <?php } ?>
    
    <!-- resourceGrid is still in the forloop, so it's rendered three times 
    
    Can I do the following here:
    
    - stop the forloop here
    
    <div class="resourceGrid d-flex flex-column"> so that it's only printed once
    
    - resume the forloop
    -->
    
    <?php if ($i > 1) { ?>
    <div class="resourceGrid d-flex flex-column">
      <div class="small">
        <span class="title"><?php echo $title; ?></span>
      </div>
    </div>
      <?php } ?>


    <?php } ?> <!-- end for each -->
  </div>
</div>

Однако весь мой контент просто выплевывается подряд (из-за flex-row). Я думаю, что правильный способ сделать это - остановить цикл for до <div class="small">, но тогда его содержимое будет неопределенным.

Я хочу, чтобы содержимое small находилось в столбце, как показано на рисунке, но не может вложить столбец в другой столбец.

Какой лучший способ подойти к этому?