Bootstrap レスポンシブ化について

使っているBootstrapのバージョンはbootstrap', '~> 4.5'です！
画面幅がcol-md（768px）以上の場合、この形を保持したい

しかし、９６２pxにまで画面幅を狭めると”絵本のタイトルで検索”のテキストの部分が二行になってしまっています。これを画面幅がcol-md（768px）以上の場合までは上記の画像のように一行で表されるようにしたいです。この場合メディアクエリを使いフォントサイズを小さくする他により簡単に一行で表示する方法はありますでしょうか。

colを指定した要素がcolからはみ出てしまう場合、要素（h１タグなど）が二行になってしまったりします。

html
1<body>
2  <div class="container">
3    <div class ="row box-row-1">
4      <div class="col-md-3 box-1">
5        サイドバー
6      </div>
7      <div class="col-md-9 box-2">
8        <div class="row box-row-2">
9          <!-- <div class="col-md-4"> -->
10            <p class="box-3 col-md-4">絵本のタイトルで検索</p>
11          </div>
12          <!-- <div class="col-md-4"> -->
13            <p class="box-4 col-md-4">検索フォーム</p>
14          </div>
15          <!-- <div class="col-md-4"> -->
16            <p class="box-5 col-md-4">検索</p>
17          <!-- </div> -->
18        </div>
19        <div class="row box-row-3">
20          商品一覧
21        </div>
22      </div>
23    </div>
24  </div>
25</body>