Html Css Div Yapısı Yardım

Değerli arkadaşlar merhaba,
Bugün bir ödev geldi elimden geleni yaptım ancak sanırım bir yerde hata yapıyorum. Ödevimiz pc tablet telefona göre 3 farklı konumlanan bir yapı fakat ben pc yi yapmama rağmen tablete geçişte sorun yaşıyorum. Yardımcı olur musunuz?
BU ÖDEV

YAPMIŞ OLDUĞUM PC GÖRÜNÜM

YAPMIŞ OLDUĞUM TABLET GÖRÜNÜM (GÖRÜLDÜĞÜ ÜZERE YEŞİL VE MAVİ KIRMIZININ YANINA GELEMEDİ)



Kodları isterseniz atabilirim. Şimdiden teşekkürler

Kodları iletir misiniz hocam

<div class="container">
<div class="row">
<div class="col-xl col-md-4 kırmızı">
<P></P>
</div>
</div>

<div class="row">
<div class="col-xl-6 col-md-4 yesil">
<p></p>
</div>
<div class="col-xl-6 col-md-2 mavi">
<p></p>
</div>
</div>


<div class="row">
<div class="col-xl-3 col-md-6 siyah">
<p></p>
</div>
<div class="col-xl-3 col-md-6 pembe">
<p></p>
</div>
<div class="col-xl-3 col-md-2 ten">
<p></p>
</div>
<div class="col-xl-3 col-md-2 sari">
<p></p>
</div>
</div>


<div class="row">
<div class="col-xl-6 col-md-8 pudrapembe">
<p></p>
</div>
<div class="col-xl-6 col-md gyesil">
<p></p>
</div>
</div>

</div>
</body>
</html>

Google a CSS media rule yazıp max width ile tablet ve mobil ayarlarını yapın çözülür.

ilettim hocam buyrun

• @media(min-width:320px){/* smartphones, iPhone, portrait 480x320 phones */}
• @media(min-width:481px){/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */}
• @media(min-width:641px){/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */}
• @media(min-width:961px){/* tablet, landscape iPad, lo-res laptops ands desktops */}
• @media(min-width:1025px){/* big landscape tablets, laptops, and desktops */}
• @media(min-width:1281px){/* hi-res laptops and desktops */}
  
  ekran boyutlarına göre yukardakı kodların içine mobil, tablet, diğer ekranlara göre ayarlamalısınız css kodlarınızı

hocam zaten bootstrapın hazır classlarından col-xl col-md vs. yazarak yapmam gerekiyor. bu gösterdiğim şekilde yapmam lazım yani

hocam bu şekilde yazamam maalesef, bootstrapin hazır classlarından yararlanmam gerekli.

Col-lg-12 kırmızı alanı temsil ediyor gördüğüm kadarıyla ancak şöyle bişey var mobilde col-lg-3 e düşmüş bu da demek oluyorki kırmızı col-lg-12 değil yüzdeli yada pikselli width e bağlanmış ben öyle anladım.