Css Responsive Ayarlamada Takıldım

<div class="responsive">

    <div class="row row-cols-2 row-cols-md-2 g-1">

      <div class="col">

        <div class="card h-100">

         

         <img src="/images/urun1.png" class="img-thumbnail" alt="...">

         <div class="urunisimaciklamayeri">

           <h5 class="yemekismi">ADANA KEBAB</h5>

           <h5 class="yemekismi2">أضنة</h5>

         </div>

         <div class="card-footer">

           <small class="fiyatbaslik">Fiyat:</small>

           <small class="fiyati"> 45 TL</small></b>

         </div>

       </div>

     </div>

CSS'de dive nasıl çözünlürk büyüğünde kolon sayısnı arttır diyebilebilirim ?

https://getbootstrap.com/docs/3.3/css/ #grid-responsive-resets

Örnek buldum ama uygulamada sorun yaşadım.

Hocam sizin sitenizin kodlanış frameworku ile verdiğiniz örnek farklı, bootstrap ile kodlamış olsaydınız verdiğiniz örnek çalışırdı. 
Siteye bootstrap linki vererek de yapabilirsiniz, bunun için kolon yapısını inceleyebilirsiniz. 
Yapamazsanız yarın irtibata geçin yardımcı olayım
 

bu linki inceleyin

https://getbootstrap.com/docs/5.1/layout/grid/