レスポンシブでスマホでみた時に、フッターを4分割し画像とテキストを表示させたい。

Question

初心者です。
以下イメージのようにレスポンシブデザインでスマホで画面をチェックした時に、フッターを4分割し画像とテキストを表示させたいです。
画像の名前は以下４つです。
home.png
message.png
game.png
community.png
スマホでみた時に４つの画像を横一列に均等に並べてテキストを表示させたいです。
イメージ：

#ためしたこと
一言でいうと設定はできたのですがスマホでみた時に縦表示になってしまいます。画面がスマホになった時に縦に変化する事はレスポンシブデザインの表示方法として適切な表示方法だと思うのですが、今回はそうではなくスマホでみた場合でも横一列に４つアイコンとテキストを表示させたいです。

ブートストラップで通常のレスポンシブの４分割ですと以下の画像のようになると思います。
例えばPCでみるとこのように４つ横一列に配列されますがグリッドシステムにより

スマホでみると以下のように縦に表示されます。以下通常のレスポンシブで正常稼働しているソースです。

#ためしたソース

     <div class="row">
       <div class="col-lg-3 skyblue">
         col-lg-3
       </div>
       <div class="col-lg-3 pink">
         col-lg-3
       </div>
       <div class="col-lg-3 skyblue">
         col-lg-3
       </div>
       <div class="col-lg-3 pink">
         col-lg-3
       </div>
     </div>

#やりたいこと

スマホでwebを表示させた場合、横に画像を四分割均等表示させたいです。以下のように設定したいです。
home.png
message.png
game.png
community.png
という４つの画像を均等にスマホ4分割させたいです。例えばiphone5でもiphone6でも
メニュー(ホーム、メッセージ、ゲーム、コミュニティ)4分割させたいです。

現在できたこと：テキストが表示されたが縦に表示されてしまう

やりたいイメージ：テキストと画像が表示され、縦ではなく横に表示されている。

また4分割にすると縮尺で画像や文字がずれてしまいます。そこで文字はテキストを設定し
スマホになった時に縦にメニューを四分割ではなく横に均等に四分割に表示させるためにはどのように設定すれば良いでしょうか？
PCの表示の時は以下のように10px均等にマージンをいれたいです。

PC表示

Comments

[x_x]

この質問と同内容でしょうか？
https://teratail.com/questions/211595

Answer 1

col-3で<576px以下のレスポンシブクラスを付与すればできます。

Bootstrap公式
・https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row">
  <div class="col-3 col-3 skyblue">
    col-lg-3
  </div>
  <div class="col-3 col-lg-3 pink">
    col-lg-3
  </div>
  <div class="col-3 col-lg-3 skyblue">
    col-lg-3
  </div>
  <div class="col-3 col-lg-3 pink">
    col-lg-3
  </div>
</div>

Comments

[Lhankor_Mhy]

これは有効な回答だと思いますが、なぜ低評価がついているのでしょう……？