Html 如何在Boostrap 4上创建5和4（用于移动）相等列

我想用容器流体为我的响应性设计创建5个相等的引导柱。我已经设法做到了。但我需要其中一列以较低的分辨率消失。（我也已经这样做了）所以在mobile视图中，我想将这4列等分为两行。但是，我当前的代码无法做到这一点。它被分成两行，但在第一行上有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>

111
第1栏
222
第2栏
333
第3列（低分辨率时消失）
444
第4栏
555
第5栏

---

我错过了什么？谢谢。

col xs-*-

在Bootstrap 4 beta版中不再存在。使用

col-sm

在sm和up上显示等宽列，使用

col-6

在mobile（xs）上显示50%宽列

111
第1栏
222
第2栏
333
第3列（低分辨率时消失）
444
第4栏
555
第5栏

<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>