Bootstrap4 のグリッドレイアウトブレークポイントで、スマホ閲覧時の表記が分からない

前提・実現したいこと

bootstrap4を使用して、htmlページを作成しております。
グリッドやブレークポイントについて、解決できない問題があります。
カラム落ち？を利用して、レスポンシブなものを作成中です。

新着情報を表示させるようなものなのですが、

というような感じで、私が実現したいものは以下のようになります。

スマホ閲覧時には、iphone6/7/8
■■
■■
■■
■■

タブレットでは 768px
■■■
■■■
■■

PCでは
■■■■
■■■■

といった形にしたいです。

chromeのデベロッパツールで確認したところ、スマホ時のcol-6 が想定外の動作で、タブレットで想定している表記になってしまいます。

該当のソースコード

<div class="row"> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image1.jpg"></image> <h6>text</h6> <p> テキストテキストテキストテキストテキスト </p> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image2.jpg"> <h6>text</h6> <p>テキストテキストテキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image3.jpg"> <h6>テキスト</h6> <p>テキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image4.jpg"> <h6>テキスト</h6> <p>テキストテキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image5.jpg"></image> <h6>テキスト</h6> <p> テキストテキストテキストテキスト </p> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image6.jpg"> <h6>テキスト</h6> <p>テキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image7.jpg"> <h6>テキスト</h6> <p>テキストテキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image8.jpg"> <h6>テキスト</h6> <p>テキストテキストテキストテキストテキスト</p> </image> </div> </div>