スマホとPCで要素の表示順番を入れ替えるには？

前提・実現したいこと

サイト模写をしています。
見本のように画像をpタグとボタンの間に配置したいです。
自分のページでは、画像を最下部に持ってくることができたのですが、
間に配置することができません。

Bootstrapを使用しています。
親要素と子要素の関係だと思うのですが、、、、

お手数ですが、ご教示よろしくお願い致します。

以下のサイトを参考にしています。
http://misallychan.com/entry/2018/05/25/200000#HTML%E3%82%92%E3%81%84%E3%81%98%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%97CSS%E3%81%A0%E3%81%91%E3%81%A7%E8%A1%A8%E7%A4%BA%E9%A0%86%E7%95%AA%E3%81%AE%E8%AA%BF%E6%95%B4%E3%81%8C%E5%8F%AF%E8%83%BD

⚫︎発生している問題

見本

自分

該当のソースコード

HTML

<!-- モバイルレスポンシブ------------------------------ -->
        <div class="d-flex flex-wrap justify-content-center">
            <div class="col-md-7 col-12 px-5 align-self-center h3 px-4 pull-5" >

                <div class="mr">

                    <div class="f-number">1</div>
                    <h1 class="mobile pt-4">モバイルレスポンシブ</h1>
                    <p class="m-english">Mobile Responsive</p>
                    <p>
                        Xeory
                        Extensionはレスポンシブデザインを採用しています。スマートフォンやタブレットなど各種デバイスで表示が最適化されます。
                    </p>
                    <div class="btn-f">
                        <a href class="btn-simple">詳しく見る</a>
                    </div>

                </div>

                    
            </div>
            <div class="col-md-5 col-12 p-0 align-self-center push-7">
                <img class="img-fluid" src="img2/macbook-pen.jpg" alt="" />
            </div>
            
        </div>

CSS

.f-number {
    width: 34px;
    height: 73px;
    font-size: 16px;
    vertical-align: bottom;
    color: #fff;
    background: #47b39d;
    padding: 40px 12px 8px 12px;
}

.mobile,
.m-english {
    color: #47b39d;
}

.m-english {
    font-size: 10px;
}

.col-md-7 p {
    font-size: 17px;
}

.btn-simple {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 40px;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    transition: all ease-in-out 0.3s;
    background: #ff6c00;
    border-radius: 5px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.btn-simple:hover {
    opacity: 0.8;
}

.col-md-4 img {
    max-width: 100%;
    max-height: 100%;
}

レスポンシブ

@media screen and (max-width: 600px) {

    /* ナビゲーション------------------------------ */
    .navbar-toggler {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    /* XeoryExtensionの特徴コンテンツ------------- */

/* .d-flex {
                  flex-direction: column;
}

.mr {
                   order: 1;
}

.col-md-5 {
                  order: 2;
} */

⚫︎試したこと
Bootstrapで pull-Pushを使って、親要素、子要素なども入れ替えなどしてみました。
また
d-flex に flex-direction: column
mr に order: 1;
col-md-5 に order: 2;
なども追記してやってみましたが、うまくいきませんでした。

⚫︎補足情報（FW/ツールのバージョンなど）
サイト表示はChromeで、コーディングはVScodeを使用しています。
MacOSです。

⚫︎該当のソースコード

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

回答1件

ベストアンサー

flexboxは.d-flexの直下要素に適応するので、
<div class="col-md-7 col-12 px-5 align-self-center h3 px-4 pull-5" >
と
<div class="col-md-5 col-12 p-0 align-self-center push-7">
のみです

pタグとボタンは<div class="mr">の子要素なので適用されないです

参考

画像をpタグとボタンの間に入れて、微調整するのでどうでしょうか？
提示コードをそのまま使っているので、classの付け外しなどは適宜お願いします。

html
1<div class="mr">
2  
3  <div class="d-flex flex-wrap justify-content-center">
4    <!-- flex-item-1 -->
5    <div class="col-md-7 col-12 px-5 align-self-center h3 px-4 pull-5">
6      <div class="f-number">1</div>
7      <h1 class="mobile pt-4">モバイルレスポンシブ</h1>
8      <p class="m-english">Mobile Responsive</p>
9      <p>
10        Xeory
11        Extensionはレスポンシブデザインを採用しています。スマートフォンやタブレットなど各種デバイスで表示が最適化されます。
12      </p>
13    </div>
14    
15    <!-- flex-item-2 -->
16    <div class="col-md-5 col-12 p-0 align-self-center push-7">
17      <img class="img-fluid" src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u15/158433/6077d3395274ee31_thumbnail.jpg" alt="" />
18    </div>
19    
20    <!-- flex-item-3 -->
21    <div class="btn-f col-7">
22      <a href class="btn-simple">詳しく見る</a>
23    </div>
24    
25  </div>
26  
27</div>