引导程序4列中嵌套图像的高度相等

Question

我试图像这样动态创建图像网格：

我得到的是这样：

这是我的结构：

<section class="categories-grid">
  <div class="container-fluid">
    <div class="row frontpage-images">

      <?php $categories = Roller::getBlock('Article/Category_Navi')->getTree() ?>

      <?php foreach($categories as $i=>$category): ?>
        <?php if($i == 0): ?>
          <div class="col-8">
            <a href="<?= $category['category_url'] ?>">
              <div class="image">
                <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>
              </div>
            </a>
          </div> <!--  col-8 end -->
        <?php endif ?>
        <?php if($i == 1): ?>
          <div class="col-4">
            <a href="<?= $category['category_url'] ?>">
              <div class="image">
                  <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                  <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>
              </div>
            </a>
        <?php endif ?>
        <?php if($i == 2): ?>
            <a href="<?= $category['category_url'] ?>" id="move-me-into-second">
              <div class="image" >
                <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>
              </div>
            </a>
            <script>
              $('#move-me-into-second').appendTo('.col-4');
            </script>
          </div> <!--  col-4 end -->
        <?php endif ?>
        <?php if($i > 2): ?>
          <div class="col-6">
            <a href="<?= $category['category_url'] ?>">
              <div class="image">
                <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>                
              </div>
            </a>
          </div> <!--  col-6 end -->
        <?php endif ?>
      <?php endforeach; ?>
    </div>
  </div>
</section>

这是CSS：

.frontpage-images img{
    width: 100%;
    height: auto;
    padding-top: 15px;
}

我做错了什么？为什么不能使col-4内的图像具有相等的高度并适合col-8内的高度？非常感谢您的帮助。