Обтекание столбцов в сетке Bootstrap

Question

У меня проблема с сеткой Bootstrap 4. Я пытаюсь показать несколько изображений (6 в ряд), которые будут отображать все шесть в ряд на больших экранах, 3 на средних экранах и 2 на меньших экранах, и 1 на очень маленьких. Кажется, что независимо от того, что я пытаюсь, мои изображения продолжают переноситься на следующую строку. Так что в какой-то момент у меня будет пять или четыре изображения в верхней строке и 1 или два изображения в нижней строке. Есть ли способ, которым я могу предотвратить наложение изображений и показывать только 1, 2, 3 или 6 изображений в каждой строке за раз?

Чего мне не хватает? Любая помощь приветствуется.

Вот ссылка на ручка

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;
  }