如何在Bootstrap 4中重叠图像（div或列）？

Question

这就是我想要的样子

到目前为止，现在是这样

这是我的代码：

        <div class="col-md-10 offset-sm-2 slider">
            <ul class="slides">
                <li>
                    <div class="col-sm-6">
                        <ul class="block-stories overlap-left">
                            <li>
                                <ul class="block-storie">
                                 <li class="block-title before">
                                 <h6 class="bold mb-0">Before</h6>
                        </li>
                        <li><img src="img/11.jpg" alt=""></li>
                    </ul>
                </li>
                </ul>
                </div>
                <div class="col-sm-6">
                        <ul class="block-stories overlap-right">
                                <li>
                                    <ul class="block-storie">
                                     <li class="block-title after">
                                     <h6 class="bold mb-0 colored">After</h6>
                            </li>
                            <li><img src="img/12.jpg" alt=""></li>
                        </ul>
                    </li>
                    </ul>
                </div>
                </li>
            </ul>
        </div>

我在做什么错？是否可以使用CSS并按位置移动图像？但是，如果这样做，会使媒体查询变得更加复杂吗？ CSS代码如下。 CSS

.slider .slides {
    margin-top: 1em;
    margin-bottom: 1em;
}
.block-storie {
    margin-right: 4em;
    margin-left: 4em;
    border: 1px solid #ececec;
    background: #ffffff;
}
.block-stories.overlap-left {
    left: 6em;
    position: relative;
    top: -2.5em;
}
.block-stories.overlap-right {
    position: relative;
    right: 6em;
    top: -0.8em;
}
.block-storie li {
    display: block;
}
.block-storie li:last-child {
    border: 5px solid #ffffff;
}
.block-storie li.block-title {
    padding: .6em .6em .2em;
    text-align: center;
}
.block-storie li.block-title {
    background: #ffffff;
}