bootstrapでレスポンシブを効かせたい

画像の様に、
PCでは記事をcol-8、サイドバーをcol-4で記述しております。

SPサイズの際に、サイドバーを非表示にさせ、記事を12カラムで表示させたいのですが上手くいきません。

対応としましては、
「d-none d-sm-block」でサイドバーを非表示にさせ、記事には「col-sm-12」と記述したり、非表示が原因だと考え、段落ちで試したりしましたが、上手くいきません。

bootstrapを始めたばかりで、うまく調べる事ができなかった為、質問させて頂きました。
分かりづらい点もあるとは思いますが、どなたか解決策をご教授頂けないでしょうか。

html
1        <section>
2          <div class="container">
3            <div class="row">
4              <div class="col-8　col-sm-12">
5                <div class="list-box row border-bottom">
6                  <div class="col-7">
7                    <div class="d-flex align-items-center">
8                      <time datetime="2022-3-8" itemprop="datepublished" class="mb-1 mb-md-0 mr-0 mr-md-5">2022.03.28</time>
9                      <ul class="ctg-term d-flex align-items-center flex-nowrap">
10                        <li class="tid-2">サーバーサイド</li>
11                        <li class="tid-26">モジュール</li>
12                      </ul>
13                    </div>
14                    <h3 class="line-clamp line-3 line-md-2 mb-2">
15                      これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.
16                    </h3>
17                    <p class="line-clamp line-2 line-md-3 cl-gray mb-2 mb-md-4">
18                      これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.
19                    </p>
20                    <div class="author d-flex align-items-center flex-no-wrap" data-swiper-parallax="-1000">
21                      <img src="themes/custom/ore_no_drupal/img/author01.png" loading="lazy" alt="Taro Tanaka" />Shin Kanemitsu
22                    </div>
23                  </div>
24                  <div class="col-5">
25                    <img src="themes/custom/ore_no_drupal/img/article02.png" loading="lazy" alt="">
26                  </div>
27                </div>
28              </div>
29
30              <!-- side-bar  -->
31              <div class="col-4 d-none d-sm-block">
32                <h3 class="cl-black text-center sidebar-title">Category's</h3>
33                <div class="side-links">
34                  <ul class="row links-ctg d-flex justify-content-center flex-wrap">
35                      <li class="col-5 offset-1"><a href="#">サーバーエンド</a></li>
36                      <li class="col-5 offset-1"><a href="#">フロントエンド</a></li>
37                      <li class="col-5 offset-1"><a href="#">モジュール</a></li>
38                      <li class="col-5 offset-1"><a href="#">その他</a></li>
39                      <li class="col-5 offset-1"><a href="#">サーバーエンド</a></li>
40                      <li class="col-5 offset-1"><a href="#">フロントエンド</a></li>
41                    </ul>
42                  </div>
43                  <h3 class="cl-black text-center sidebar-title">Monthly Articles</h3>
44                  <div class="side-links">
45                    <ul class="links-month d-flex justify-content-center flex-wrap">
46                      <li><a href="#">2022.04</a></li>
47                      <li><a href="#">2022.03</a></li>
48                      <li><a href="#">2022.01</a></li>
49                      <li><a href="#">2022.01</a></li>
50                      <li><a href="#">2021.12</a></li>
51                    </ul>
52                  </div>
53              </div>
54            </div>
55          </div>
56        </section>