I am trying to make a section that has 3 sections, one vertically elongated and another 2 on its right side that are adjusted to the height of the first one, I need it to adapt to mobile phones and tablets, I thought that being using bootstrap would adapt to the size but it is not like that since when we change the device it appears deformed.
The idea would be that it stays this way in computer format for large screens, in the code you can see what I mean in full screen, but in mobile to adapt it, perhaps it should stay like the image below so that it can be seen correctly.
Would someone know how to help me? Thank you.
/* minislide 1*/
.minislide1{
background-color: #ffffff;
padding-bottom: 1rem;
margin-bottom: 1.3rem;
}
.minislide1 img{
width: 95%;
}
.minislide1 h2{
font-size: 1.6rem;
font-weight: 500;
color: black;
padding-top: 1rem;
}
.minislide1 p{
font-size: 1rem;
font-weight: 500;
color: black;
}
/* minislide 2*/
.minislide2{
background-color: #ffffff;
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 1.3rem;
}
.minislide2 img{
width: 95%;
}
.minislide2 h2{
font-size: 1.6rem;
font-weight: 500;
color: black;
}
.minislide2 p{
font-size: 1rem;
font-weight: 500;
color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class=" gris">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2>Lorem ipsum dolor sit amet</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor</p>
</div>
<div class="container-fluid">
<div class="row">
<div class='col-6 col-sm-6'>
<div class="row">
<div class="col-sm-12"> <img src="https://images.unsplash.com/photo-1657299156261-4ce1d0a2cf5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="img-fluid">
</div>
</div>
</div>
<div class='col-6 col-sm-6'>
<div class="row">
<div class="col-sm-12">
<!-- miniSlide 1 -->
<div class="row minislide1">
<div class="col-6">
<h2>Lorem ipsum dolor sit amet</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor</p>
</div>
<div class="col-6">
<img class="img-fluid" src="https://images.unsplash.com/photo-1659976057522-817791f9bf3f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="imagen">
</div>
</div>
<!-- END miniSlide 1 -->
</div>
<div class="col-sm-12 d-none d-md-block">
<!-- mini Slide 1 -->
<div class="row minislide2">
<div class="col-sm-6">
<h2>Lorem ipsum dolor sit amet</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor</p>
</div>
<div class="col-sm-6">
<img class="img-fluid" src="https://images.unsplash.com/photo-1659976440475-5d6e1f43ddf7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="imagen">
</div>
</div>
<!-- END miniSlide 2 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You could build a structure similar to what you are looking for with just Boostrap, taking advantage of its grid system.
The colored containers are only to illustrate the example. In order to see the jump between devices you would have to play the example in full screen mode.