Как правильно позиционировать элемент в сетке?

Question

На самом деле у меня есть компоновка с одним классом строк и двумя столбцами с использованием системы сетки начальной загрузки.

Теперь мне нужно добавить еще один элемент внутри этой системы сетки, но я не могу правильно расположить его внутримакет, как это происходит под всеми другими столбцами.Как вы можете видеть на скриншоте

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

Компоновка построена следующим образом:

<div class="container-fluid">
   <div class="row">
      <div class="col-md-4 mb-4 mt-1"></div>
      <div class="col-md-8 mb-4 mt-1"></div>
   </div>
</div>

Я пытался добавить что-то подобное, чтобы поместить 3-й столбец, но результат был, как описано выше

<div class="container-fluid">
   <div class="row">
      <div class="col-md-4 mb-4 mt-1"></div>
      <div class="col-md-8 mb-4 mt-1"></div>
      <div class="col align-self-start"><div>
   </div>
</div>

Answer 1

Вы должны использовать следующий подход

<div class="container-fluid">
    <div class="row">
        <!-- There will be column with 2 right box  -->
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12 mb-4 mt-1">
                </div>
                <div class="col-md-12">
                    ITEM UNDER 1ST BOX
                </div>
            </div>
        </div>
        <!-- This will be your larger left box -->
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12 mt-1">
                </div>
            </div>
        </div>
    </div>
</div>