使此布局具有响应性，而无需重复元素

Question

我必须根据自定义滑块创建此布局：

https://imgur.com/YbKdOAC

https://imgur.com/TPo2h57

-图像图标就是幻灯片的位置。

-滑块控件还有另一个粉红色块。

-最后一个粉红色块包含一些文本。没什么特别的。

这些图案中有2张背景图像。

我从使用Flexbox的桌面版开始，但是当我尝试将布局调整为平板电脑版时，这是不可能的，因为这两个元素位于不同的行中。

https://imgur.com/Upjsh8B

现在或多或少是我的代码：

<div class="slider">
    <div class="container">
        <div class="row">
            <div class="col-3">
                <img class="logo-img"
                     src="assets/images/logo.png">
                <div class="titulo-boton">
                    <h1>Lorem ipsum</h1>
                </div>
            </div>
            <div class="col-9">
                <div class="row primera" primera>
                    <div class="col yourtrip">
                        <h2>Lorem ipsum</h2>
                        <hr>
                        <p class="tags">#tags</p>
                    </div>
                    <div class="col"></div>

                    <div class="col ">
                        <div class="image-slider image-wrap">
                            <!--                            <img src="assets/images/rocket.png">-->
                        </div>
                    </div>
                </div>
                <div class="row" segunda>
                    <div class="col"></div>
                    <div class="col controls" controls>
                        <div class="botones row w-100">
                            <div class="col p-0">
                                <a href="#" class="btn">prev</a>
                            </div>
                            <div class="col p-0">
                                <a href="#" class="btn">next</a>
                            </div>
                        </div>
                    </div>
                    <div class="col"></div>
                </div>
            </div>
        </div>
    </div>
</div>

感谢您的帮助！

编辑：

我创建了一支笔来使事情变得更容易。资产不同，但布局相同。

https://codepen.io/jenvigo/pen/jRrwdw?editors=1100