Как я могу перекрывать изображения (div или столбцы) в начальной загрузке 4?

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;
}