困难的图像安排

Question

我有六个图像需要在此特定布局中安排。我觉得我一直在玩这些事情，但还没有走得很远。这是一个WP项目，所以我使用了两个ACF中继器字段。每个中继器都有三张图像。我觉得我要这一切都错了，而且解决方案比我要走的路线要简单得多。有人知道我如何实现这一目标吗？任何帮助将不胜感激！！谢谢你！

<div class="container pt-5">
            <div class="row">
                <div class="col-6"><?php the_content(); ?></div>
                <div class="col-6 image-grid">

                    <!-- first row -->
                    <div class="row justify-content-between image-grid__row-first">
                        <?php if (have_rows('image_grid_row_first')) : while (have_rows('image_grid_row_first')) : the_row('image_grid_row_first');
                                $image = get_sub_field('image');
                        ?>
                                <img src="<?php echo $image['url']; ?>" alt="">
                        <?php endwhile;
                        endif; ?>
                    </div>

                    <!-- second-row -->
                    <div class="row justify-content-between image-grid__row-second">
                        <?php if (have_rows('image_grid_row_second')) : while (have_rows('image_grid_row_second')) : the_row('image_grid_row_second');
                                $image = get_sub_field('image');
                        ?>
                                <img src="<?php echo $image['url']; ?>" alt="">
                        <?php endwhile;
                        endif; ?>
                    </div>
                </div>
            </div>
        </div>

和CSS：

.image-grid {
  img {
    max-width: 22.5%;
      object-fit: cover;
      object-position: 50% 15%;
      outline: 12px solid white;
      height: 225px;
  }
  &__row-first {
    img {
      &:nth-of-type(3) {
        max-width: 55%;
        width: 100%;
        height: 260px;
      }
    }
  }
  &__row-second {
    position: relative;
    bottom: 40px;
    z-index: -1;
    img {
      &:nth-of-type(1) {
        max-width: 55%;
        width: 100%;
      }
    }
  }
}