ブートストラップ4 col responsive

Question

私はブートストラップを使用しており、レスポンシブなレイアウトに問題があります。 私はこのような4列使用しています2行があります。それはこのようなものに変更する解像度< 1200pxで

<div class="container"> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
     <div class="col"> 
      <div class="card"> 
       some image 
       some text 
      </div> 
     </div> 
    </div> 
</div> 

：setup-2

どのように私はそれを変更することができ setup-1

コードをsetup-3

私はそれを担当するブートストラップコードの一部を探していましたが、 succesなしで。私の 'style.css'で上書きする方法はありますか？

Answer 1

代わり

あなたが使用すること

<div class="col"> 

：

<div class="col-xl-3 col-lg-6"> 

あなたは、このリンクでブートストラップグリッドに関する詳細な情報を読み取ることができます。 https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp