レスポンシブ対応の際、要素の順番を入れ替える。

Question

今、模擬制作をしております。
PC表記の際に、右側に来る要素（セクションタイトル）が、スマホ画面になると下に表示されます。
（ここはそうなるだろうと認識済みです。）

これをスマホ画面の時だけ上の方に表示させるためにはCSSをどの様に表記したら良いかご教授頂きたく思います。
よろしくお願い申し上げます。

 
     <section class="ftco-section pitching-section">
      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-md-6 pitching-desc">
            <div class="program d-flex ftco-animate">
              <div class="icon d-flex justify-content-center align-items-center">
                <span class="flaticon-gym"></span>
              </div>
              <div class="text ml-5">
                <h3>基礎運動量の向上</h3>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
              </div>
            </div>
            <div class="program d-flex ftco-animate">
              <div class="icon d-flex justify-content-center align-items-center">
                <span class="flaticon-running"></span>
              </div>
              <div class="text ml-5">
                <h3>壊れない体作り</h3>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
              </div>
            </div>
            <div class="program d-flex ftco-animate">
              <div class="icon d-flex justify-content-center align-items-center">
                <span class="flaticon-stationary-bike"></span>
              </div>
              <div class="text ml-5">
                <h3>筋力</h3>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
              </div>
            </div>
            
            
          </div>

          <div class="col-md-6 pr-md-5 pitching-title">
            <div class="heading-section text-md-right ftco-animate">
              <span class="subheading">Training</span>
              <h2 class="mb-4">セクションタイトル</h2>
              <p></p>
             
              <p><a href="#" class="btn btn-primary btn-outline-primary px-4 py-3">申し込みをする</a></p>
            </div>
          </div>


        </div>
      </div>
    </section>

.pitching-section{
  display: flex;
  flex-direction: row;
}

@media (max-width: 480px) {
    .pitching-section {
        flex-direction: column;
    }
    .pitching-title {
        order: 1;
    }
    .pitching-desc {
        order: 2;
    }
}
コード

Comments

[m.ts10806]

自身が組んだCSSをご提示ください。
というかCSSフレームワークを利用しているならタグにもつけてバージョンも追記してください。

[m.ts10806]

containerとかrowとかcol-md-xとか明らかにBootStrapと思ってたんですが違うのでしょうか。
違うのでしたら自身が組んだコードを全てご提示ください。でないと再現確認ができません。

Answer 1

class 名と、「PCでセクションタイトル右」ということから Bootstrap 4 を使っているものとして回答します。

ドキュメントの Direction を参考にして、flex-column-reverse flex-md-row を追加してください。
Order で順番も制御できますが、アイテムが2個しかないのでなくてもいいでしょう。

        <div class="row align-items-center flex-column-reverse flex-md-row">

https://getbootstrap.com/docs/4.3/utilities/flex/#direction
https://getbootstrap.com/docs/4.3/utilities/flex/#order