<div class="block-parent-2">
<div class="block-child-img-2">
<div class="iphone-left-2">
<img src="images/iphone2.png" alt="#" title="#"/>
</div>
</div>
<div class="block-child-2">
<h2>текст</h2>
<p class="p-right">много текста</p>
</div>
</div>.block-parent {
display: flex;
.block-child {
text-align: center;
padding: 15px;
box-sizing: border-box;
width: 50%;
white-space: pre-wrap;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: 166px;
h2 {
@include font($white,700,72px,none);
line-height: 72px;
}
.p-left {
@include font($white,300,36px,none);
padding-top:40px;
text-align: left;
width: 813px;
line-height: 36px;
}
.iphone-right {
max-width: 1330px;
width: 100%;
height: 1387px;
top: 904px;
left: 573px;
position: absolute;
}
}
}<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
.row .row-cols-2 {
display: grid;
grid-template:
"a b"
"a c";
}
.left-banner{
grid-area: a;
width: 700px;
}
.banner-left-img {
height: 100%;
width: auto;
max-width: 100%;
}
.top-banner{
grid-area: b;
margin-bottom: 20px;
width: 415px;
height: 240px;
}
.banner-top-img {
height: 100%;
width: auto;
max-width: 100%;
}
.bottom-banner{
grid-area: b;
width: 415px;
height: 240px;
}
.banner-bottom-img {
height: 100%;
width: auto;
max-width: 100%;
}
@media (max-width: 700px) {
.row .row-cols-2 {
display: grid;
grid-template:
"a a"
"b c";
}
}<div class="container">
<div class="row row-cols-2">
<div class="col img-responsive left-banner"><a href="#">
<img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-left-img">
</a></div>
<div class="col">
<div class="col top-banner img-responsive"><a href="#">
<img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-top-img">
</a></div>
<div class="col bottom-banner img-responsive"><a href="#">
<img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-bottom-img">
</a></div>
</div>
</div>
</div>