[Bootstrap]PCとスマートフォンで異なるグリッドレイアウトを作りたい

Question

質問を率直に申し上げると、下記画像のようなレイアウトをHTMLで作成したいと思っております。

• PC版

• スマホ版

しかし、どうすればこのようなレスポンシブなレイアウトを作ることができるのかわからず・・・。
どなたか、HTMLの組み方をご教授いただけないでしょうか。

Bootstrapのグリッドシステムを用いれば作成できるだろうか、と考えているのですが、
colやrowの指定方法がわからない状況です。
上記PC版の画像のようなレイアウトを組むなら、以下のように指定すればいいのかなと思っておりますが・・レスポンスブな対応がこれではできていない認識です。。

<div class="row">
  <div class="col-3">
  </div>
  <div class="col-9">
    <div class="row">
      <div class="col-4">
      </div>
      <div class="col-4">
      </div>
      .....
    </div>
  </div>
</div>

Comments

[m.ts10806]

https://teratail.com/help/question-tips#questionTips4-2

Answer 1

ドキュメントを読みましょう。
overviewの項とか、どの指定がどの幅を想定した結果になるか書いてありますし、そこにリンクのあるGrid example.なんか、まさに今回やりたいことに近いサンプルが載っています。

色でわけられていますが同じ色もあってどういうときにどこに配置されるかがイメージしづらいように私は感じました。
それぞれに一意の番号を振って、「この番号はこのときにここ」とされたほうがより具体的な設計図になると思います。