airbnbレスポンシブ設定をしたい

前提・実現したいこと

https://www.airbnb.jp/host/homes
airbnbの模写コーディングをしており、フッターの上にあるリストの塊のところで質問があります。
BootstrapXLサイズの時に4列にしたいのですが、縦一列になってしまったので、それぞれの列の親要素に<div class="col-12 col-xl-3">を加えたのですがその際に途中のmdのレスポンシブが消されてしまいました。途中のレスポンシブを反映させつつ、XLの際に4列にする方法を教えていただきたいです。

該当のソースコード

HTML CSS Bootstrap
ソースコード
HTML

                            <div class="col-12 col-xl-3">
                                            <div class="col-12 ">
                                                    <p>企業情報</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnbのご利用方法</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>ニュースルーム</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnb Plus</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnb Luxe</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                            <p>HotelTonight</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnbビジネスプログラム</p>
                                            </div>


                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>オリンピック</p>
                                            </div> 
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>採用情報</p>    
                                            </div>  

                            </div>
                         


                            <div class="col-12 col-xl-3">
                                            <div class="col-12">
                                                    <p>コミュニティ</p>
                                            </div>
                                            
                                            <div class="col-12 col-md-3 col-xl-12">
                                                    <p>ダイバーシティ＆ビロンギング</p>
                                            </div>
                                            <div class="col-12 col-md-3 col-xl-12">
                                                    <p>アクセシビリティ対応</p>
                                            </div>
                                            <div class="col-12 col-md-3 col-xl-12">
                                                    <p>Airbnbアソシエイト</p>
                                            </div>

                                            <div class="col-12">
                                                    <p>お友達を招待</p>
                                            </div>
                            </div>
                     

                            <div class="col-12 col-xl-3">
                                            <div class="col-12">
                                                    <p>ホスト</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>お部屋を掲載</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>オンライン体験をホストする</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>体験をホストする</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>責任あるホスティング</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>オープンホーム</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>リソースセンター</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>コミュニティセンター</p>
                                            </div>
                           
                            </div>


                              
                            <div class="col-12 col-xl-3">

                                            <div class="col-12">
                                                    <p>サポート</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnbの新型コロナウイルスに対する取り組み</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>ヘルプセンター</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>キャンセルオプション</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p> 近隣コミュニティサポート</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>トラスト＆セーフティー </p>
                                            </div>
                            </div>

                           
                            
                    </div>
           </div>
    </footer>

CSS
なし

試したこと

ここに問題に対して試したことを記載してください。
それぞれの親要素に<div class="col-12 col-xl-3">を加え、レスポンシブをしようとしました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
bootstap4.5ver

行動規範の内容に同意します

回答1件

ベストアンサー

col-*の設定を有効にするには、親要素がrowである必要があります。

html
1<footer>
2  <div class="container-fluid">
3    <div class="row">
4      <div class="col-12 col-xl-3">
5        <div class="row">           <!-- 挿入 -->
6          <div class="col-12 ">
7            <p>企業情報</p>
8          </div>
9          <div class="col-12 col-md-4 col-xl-12">
10            <p>Airbnbのご利用方法</p>
11          </div>
12          <div class="col-12 col-md-4 col-xl-12">
13            <p>ニュースルーム</p>
14          </div>
15          <div class="col-12 col-md-4 col-xl-12">
16            <p>Airbnb Plus</p>
17          </div>
18
19          <div class="col-12 col-md-4 col-xl-12">
20            <p>Airbnb Luxe</p>
21          </div>
22          <div class="col-12 col-md-4 col-xl-12">
23            <p>HotelTonight</p>
24          </div>
25          <div class="col-12 col-md-4 col-xl-12">
26            <p>Airbnbビジネスプログラム</p>
27          </div>
28
29          <div class="col-12 col-md-4 col-xl-12">
30            <p>オリンピック</p>
31          </div>
32          <div class="col-12 col-md-4 col-xl-12">
33            <p>採用情報</p>
34          </div>
35        </div>                      <!-- 挿入 -->
36      </div>
37
38  <!-- 以下同様に -->