Boostrap 4에 5와 4 (모바일 용) 동등한 열을 만드는 방법

Question

컨테이너 유동체로 반응하는 디자인을 위해 부트 스트랩에 5 개의 동일한 열을 만들고 싶습니다. 나는 그것을 할 수 있었다. 그러나 저해상도에서 사라지려면 해당 열 중 하나가 필요합니다. (나는 이미 했었습니다.) 그래서 모바일보기에서 4 열을 똑같이 2 행으로 분리하고 싶습니다. 그러나, 현재 코드는 그렇게하지 못하고있다. 2 행으로 나뉘어져 있지만 첫 번째 행에는 3 개의 동일한 열이 있고 두 번째 행에는 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>