Boostrap 4に5と4（モバイル用）の等価カラムを作成する方法

Question

コンテナ流体を使用したレスポンシブデザインのために、ブートストラップに5つの等しいカラムを作成したかったのです。私はそれをすることができた。しかし、私は低解像度で消えるためにそれらの列の1つを必要とします。 （これも私がすでに行っている）モバイルビューでは、これらの4つの列を2つの行に均等に分割したいと考えています。しかし、私の現在のコードはそうしていません。 2行に分かれていますが、最初の行には3つの等しい列があり、2番目の行には3つの列があります。

これは私の現在のブートストラップコードです。

 <div class="container-fluid content"> 
     <div class="row"> 
      <div class="col col-xs-6"> 
      <div class="stats"> 
       <div class="big">111</div> 
       <div class="small">COLUMN 1</div> 
      </div> 
      </div> 
      <div class="col col-xs-6"> 
      <div class="stats"> 
       <div class="big">222</div> 
       <div class="small">COLUMN 2</div> 
      </div> 
      </div> 
      <div class="col d-none d-md-block"> 
      <div class="stats"> 
       <div class="big">333</div> 
       <div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div> 
      </div> 
      </div> 
      <div class="col col-xs-6"> 
      <div class="stats"> 
       <div class="big">444</div> 
       <div class="small">COLUMN 4</div> 
      </div> 
      </div> 
      <div class="col col-xs-6"> 
      <div class="stats"> 
       <div class="big">555</div> 
       <div class="small">COLUMN 5</div> 
      </div> 
      </div> 
     </div> 
     </div> 

私は何が欠けていますか？ありがとう。

Answer 1

col-xs-*-は、もはやブートストラップ4ベータには存在しません。

https://www.codeply.com/go/W46IKaZhdR

私は必要なものだ

<div class="container-fluid content"> 
    <div class="row"> 
     <div class="col-sm col-6"> 
      <div class="stats"> 
       <div class="big">111</div> 
       <div class="small">COLUMN 1</div> 
      </div> 
     </div> 
     <div class="col-sm col-6"> 
      <div class="stats"> 
       <div class="big">222</div> 
       <div class="small">COLUMN 2</div> 
      </div> 
     </div> 
     <div class="col d-none d-md-block"> 
      <div class="stats"> 
       <div class="big">333</div> 
       <div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div> 
      </div> 
     </div> 
     <div class="col-sm col-6"> 
      <div class="stats"> 
       <div class="big">444</div> 
       <div class="small">COLUMN 4</div> 
      </div> 
     </div> 
     <div class="col-sm col-6"> 
      <div class="stats"> 
       <div class="big">555</div> 
       <div class="small">COLUMN 5</div> 
      </div> 
     </div> 
    </div> 
</div>