demo: https://jsfiddle.net/vbk7d1oh/
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
<style>
.color-1 {
background: #FE0000;
}
.color-2 {
background: #00FF01;
}
.color-3 {
background: #0000FE;
}
.color-4 {
background: #000000;
}
.color-5 {
background: #FF00FE;
}
.color-6 {
background: #C1AA74;
}
.color-7 {
background: #FFFF01;
}
.color-8 {
background: #F4997C;
}
.color-9 {
background: #B0D39B;
}
.row div p {
height: 100px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container pt-5">
<div class="row gx-0">
<div class="col-3 col-sm-3 col-md-5 col-lg-12">
<p class="color-1"></p>
</div>
<div class="col-3 col-sm-3 col-md-4 col-lg-6">
<p class="color-2"></p>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-6">
<p class="color-3"></p>
</div>
<div class="col-3 col-sm-3 col-md-6 col-lg-3">
<p class="color-4"></p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
<p class="color-5"></p>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3">
<p class="color-6"></p>
</div>
<div class="col-12 col-sm-12 col-md-3 col-lg-3">
<p class="color-7"></p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-4 ps-5 ps-sm-5 ps-md-0">
<p class="color-8"></p>
</div>
<div class="col-6 col-sm-6 col-md-12 col-lg-8 pe-5 pe-sm-5 pe-md-0">
<p class="color-9"></p>
</div>
</div>
</div>
</body>
</html> 
