BootStrap4 （グリッド）：レスポンシブ時の順番について

※boostarp4初心者です。

実現したいことを言葉で説明するのが難しいため、画像で説明したいと思います。

↓現在

実現したい
↓

ソース

HTML
1<div class="container-fluid">
2    <div class="row">
3      <div class="col-md-6 left-back-iamge">　　// １
4        　<div class="container background-image">
5          <div class="row height-size align-items-center">
6            <div class="col-3"></div>
7            <div class="col-6">
8            </div>
9            <div class="col-3"></div>
10          </div>
11        </div>
12      </div>
13      <div class="col-md-6 right-back-image">   // ２
14        <div class="container">
15          <div class="row height-size align-items-center">
16            <div class="col-3"></div>
17            <div class="col-6">
18              <img src="./images/New talk.png" width="60" height="60" class="d-inline-block align-top" alt="">
19              <p class="content_messege">*******************************！</p>
20              <p class="mb-2">**************</p>
21              <p><button type="button" class="btn btn-success btn-block">アカウントの作成</button></p>
22              <p><button type="button" class="btn btn-outline-success btn-block">ログイン</button></p>
23            </div>
24            <div class="col-3"></div>
25          </div>
26        </div>
27      </div>
28    </div>
29  </div>