为什么我的col-12列在另一列的上方而不是在另一列的上方？

Question

当设备从xs到sm时，我有两列col-12列。我将第二列设为position：relative，以便将图像定位在position：absolute之内。图像按预期堆叠在另一个之上，但是应该位于另一个之上的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”的col则位于另一行之上。

无礼：

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

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