（也许）停止启动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）。我认为解决此问题的正确方法是在<div class="small">之前停止for循环，但是其内容将不确定。

我希望small内容位于图像所描绘的一列中，但不能将一列嵌套在另一列中。

解决此问题的最佳方法是什么？