brown adlı üyeden alıntı: mesajı görüntüle
Umarım senin için yararlı olur.

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>
hocam çok teşekkürler ben de zaten cevabı bulmuştum yeni. tek rowda yazmalıymışım. yalnız şimdi şöyle bir sorun var. ödevde görüldüğü üzere telefon görününümünde sağ ve soldan ufak bir boşluk var bunu nasıl yapabilirim?