モバイルでブートストラップスタッキングを停止する

Question

私は3つのボタンをページの下部にどのように配置するかを決めるために行内に行があります。それはデスクトップとタブレットではうまく見えますが、モバイルではスタックしており、col-xs-4 divはそのコンテナの1/3ではなく全幅です。サークルが積み重ねられないように変更できるものはありますか？

関連するコード：

<div class="row buttonBottom"> 
     <div class="col-md-4 col-xs-2 col-sm-2"></div> 
     <div class="col-md-4 col-xs-8 col-sm-8"> 
      <div class="row"> 
      <div class="col-xs-3 col-sm-3 col-md-3"></div> 
      <div class="col-xs-2 col-sm-2 col-md-2"> 
       <div class="wrap-circle"> 
       <div class="circle jetblack"></div> 
       </div> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2"> 
       <div class="wrap-circle"> 
       <div class="circle gold"></div> 
       </div> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2"> 
       <div class="wrap-circle"> 
       <div class="circle white"></div> 
       </div> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"></div> 
      </div> 
     </div> 
     <div class="col-md-4 col-xs-2 col-sm-2"></div> 
     </div> 

Answer 1

だけで、クラス名で-xs-テキストなしで余分なクラスを追加します。

<div class="col-2 col-xs-2 col-sm-2 col-md-2"> 

その上のドキュメントをチェックアウト：https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes