Bootstrap网格中的列换行

Question

我在Bootstrap 4网格布局中遇到问题。我正在尝试显示许多图像（连续6张），这些图像将在大屏幕上显示该行中的全部六个，在中型屏幕上显示3个，在较小的屏幕上显示2个，在小屏幕上显示1个。看来，无论我尝试什么，我的图像都会继续换行。因此，在某些时候，我的顶行将有五个或四个图像，而底行将有1或两个图像。有什么办法可以防止图像换行，并且一次只能在每行中显示1、2、3或6张图像？

我想念什么？任何帮助表示赞赏。

这里是a pen

的链接

html：

<div class="container-fluid">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-4 img-container">
                <img class="image" src="010.jpg">
            </div>
            <div class="col-12 col-sm-6 col-md-4 img-container">
                <img class="image" src="010.jpg">
            </div>
            <div class="col-12 col-sm-6 col-md-4 img-container">
                <img class="image" src="010.jpg">
            </div>
            <div class="col-12 col-sm-6 col-md-4 img-container">
                <img class="image" src="010.jpg">
            </div>
            <div class="col-12 col-sm-6 col-md-4 img-container">
                <img class="image" src="010.jpg">
            </div>
            <div class="col-12 col-sm-6 col-md-4 img-container">
                <img class="image" src="010.jpg">
            </div>
        </div>
    </div>

css：

.img-container {
    display: inline-block;
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
  }

  .img-container img {
    display: block;
    transition: transform .6s;
    max-width:auto;
    height: 100%;
  }

  .img-container:hover img {
    transform: scale(1.3);
    transform-origin: 50% 50%;
  }

  .image {
    left: 50%;
    margin-left: -125px;
    position: absolute;
  }

  .row  {
      justify-content: space-around;
  }