Как предотвратить попадание содержимого столбца в неправильный столбец в bootstrap?

Question

Привет, я делаю какую-то работу в bootstrap, я пытаюсь сделать один столбец слева, который даст некоторую информацию, и другой набор столбцов справа, который будет содержать изображения.

Пока что Я попробовал следующий код:

<div class="container-fluid">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
            </div>
        </div>

Однако, когда я добавил пятый col-md-2, он поднял его ниже col-md-4, тогда как я хочу, чтобы он оставался под первым col-md-2.

Смотрите ниже то, что я хочу

введите описание изображения здесь

Как я могу это сделать?

Answer 1

Чтобы достичь цели, вам необходимо изменить код, как показано ниже.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
      </div>
    </div>
  </div>
</div>