Make this layout responsive without duplicate elements - html

Question

I have to create this layout responsive for a custom slider:
https://imgur.com/YbKdOAC
https://imgur.com/TPo2h57
-The icon of an image is where the slides are going to be.
-There is another pink block with the controls of the slider.
-The last pink block has some text. Nothing special.
There are 2 background-images in those patterns.
I began with the desktop version using flexbox, but when I try to adjust the layout to the tablet version, it was imposible because this two elements are in different rows.
https://imgur.com/Upjsh8B
This is more or less my code right now:
<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">
prev
</div>
<div class="col p-0">
next
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your help!
Edit:
I have created a pen to make the things easier. The assets are different but the layout is the same.
https://codepen.io/jenvigo/pen/jRrwdw?editors=1100