Bootstrapを使ってヘッダーをレスポンシブ対応させたい。

前提・実現したいこと

サイトの模写をしています。
bootstrapを使ってヘッダをレスポンシブ対応させたいのですがうまくいきません。

右上の「お問い合わせ/資料請求はこちら」というボタンを
ipad表示で小さくし、iPhone表示で消したいのですが
bootstrapを使って消し方がわかりません。

さらに言えば、模写元のこちらのサイト
https://isara.life/
のように表示を資料請求に変えたいです。

発生している問題・エラーメッセージ

bootstrapを使用した、ボタンの消し方が不明。
代わりに別のボタンを出したいが、それもできない。

bootstrapのサイトをみたが、どのクラスがどこにどう対応しているのかわからない。

エラーメッセージ
なし

該当のソースコード

html
1<header>
2      <nav class="navbar .navbar-expand-md navbar-light bg-white fixed-top">
3        <div class="container-fluid">
4          <div class="navbar-brand">
5            <img src="img/isaralogo.png" alt="" />
6            <p>バンコクのノマドエンジニア育成講座</p>
7          </div>
8          <button class="btn btn-primary my-2 my-sm-0" type="submit">
9            お問い合わせ/資料請求はこちら
10          </button>
11        </div>
12      </nav>
13    </header>

css
1.navbar-brand img {
2  width: 120px;
3  margin-right: 7px;
4}
5.navbar-brand {
6  display: flex;
7}
8
9.navbar-brand p {
10  font-size: 14px;
11  font-weight: 600;
12  position: relative;
13  bottom: -18px;
14}
15
16.btn {
17  background-color: #d84940;
18  border-color: #d84940;
19  border-radius: 50px;
20  opacity: 0.8;
21  color: #fff;
22}
23
24.btn-primary {
25  padding: 10px 40px;
26  font-style: none;
27  font-weight: 300px;
28}
29.btn:hover {
30  background-color: #d84940;
31  border-color: #d84940;
32  opacity: 1;
33  text-decoration: none;
34}