bootstrapでcol-xs-~が反応してくれない

一応rails5とbootstrap4環境で動かしているのですが殆どbootstrapの質問です。

<main class="container">
 <div class="row">
  <div class='col-xs-3 col-md-3'>
   コンテンツ
  </div>
  <div class='col-xs-3 col-md-3'>
   コンテンツ２
  </div>
  <div class='col-xs-3 col-md-3'>
   コンテンツ3
  </div>
  <div class='col-xs-3 col-md-3'>
   コンテンツ4
  </div>
 </div>
</main>

以上のようなマークアップがあったとしたら普通のPC画面ではcol-md-3が4つあるため
コンテンツコンテンツ2 コンテンツ3 コンテンツ4
と、bootstrapの12カラム分割によりこのように横並びで表示されると思います。

同じくcol-xs-3も4つあるのでスマホ画面でも同じように横並びで表示させたいのですが、何故かこのマークアップだと
コンテンツ
コンテンツ2
コンテンツ3
コンテンツ4
と縦に表示されてしまいます。
スマートフォン画面でも
コンテンツコンテンツ2 コンテンツ3 コンテンツ4
と表示させたいのですがクラスの書き方が間違っているのでしょうか？
よろしくお願い致します。