Почему мои колонны col-12 расположены одна над другой, а не одна над другой?

Question

У меня есть два столбца col-12, когда устройство имеет размер от хз до см. Я сделал второй столбец положение: относительное, чтобы позиционировать изображения в с позиции: абсолютное. Изображения располагаются один над другим, как и ожидалось, но столбец col-12, который должен располагаться над другим, расположен прямо поверх другого.

HTML:

<div class="row">
    <div class="col-12 col-md-6 col-lg-5 order-1 order-md-0 mb-2">
    </div>

    <div class="col-12 d-lg-flex col-md-6 col-lg-7 order-0 order-md-1 mb-2" id="create-col">
        <img class="img-fluid" id="base" src="base.png" />
        <img class="img-fluid" id="base" src="one-full.png" />
        <img class="img-fluid" id="base" src="two-full.png" />        
    </div>
</div>

Опять же, оба столбца должны появляться в отдельной строке из-за столбца col-12, но столбец с id = "create-col" находится прямо над другим.

Sass:

#create-col {
    position: relative;
    // vertical-align: middle;

    img {
        position: absolute;
       // top: 50%;
        // left: 50%;        
    }        
}