Bootstrap 4 引导中的嵌套映像

好吧，所以我正试图用bootstrap制作一个画廊，但不管怎样，我还是失败了

查看下面的图像，查看网格本身的外观

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="d-flex gallery justify-content-center flex-wrap">
    <div class="col-12 d-flex justify-content-center">
        <img class="col-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        <img class="col-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        <img class="col-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
    </div>

    <div class="col-9 d-flex row">
        <div class="col-9 d-flex flex-wrap">
            <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        </div>

        <div class="col-3">
            <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
            <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        </div>
    </div>
</div>

试验

这就是它的实际外观 修改此部分

 <div class="col-9 d-flex row">
    <div class="col-8 d-flex flex-wrap">
        <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
    </div>

    <div class="col-4">
        <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
        <img class="col-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/C_Hello_World_Program.png/402px-C_Hello_World_Program.png" />
    </div>
</div>

---

这只是增加了填充，我希望它被排序，就像第二行的大图像应该和上面的两个一样宽是的，这一个更好！谢谢！

.gallery .col-12 , .gallery .col-3, .gallery .col-9, .gallery .col-8 , .gallery .col-4{
   padding: 2px !important
}