なぜこのBootstrapサイトがレスポンシブ対応しているかが分からない

Question

bootstrapサンプル

このBootStrap公式にサンプルとして置いてあるサイトが何故レスポンシブ対応しているかが分かりません。
個人的にBootStrapグリッドレイアウトを用いるには

<div class ="container">
 <div class ="row">
  <div class ="col-sm-12 col-mg-6 col-lg-5">
   contents
  </div>
  <div class ="col-sm-12 col-mg-6 col-lg-5">
   contents2
  </div>
 </div>
</div>

のように、col-...とクラスでアクセスしてくる媒体によって12カラムの内どの位カラムを用いるかというのを指定すると思います。
しかしこのサイトのースを確認するとクラスへそのようにレスポンシブ対応するような記述が見当たりません。
container以下を眺めると、

 <main role="main" class="container">
      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
        <img class="mr-3" src="../../assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
        <div class="lh-100">
          <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
          <small>Since 2011</small>
        </div>
      </div>

や

<div class="media text-muted pt-3">
          <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
            <div class="d-flex justify-content-between align-items-center w-100">
              <strong class="text-gray-dark">Full Name</strong>
              <a href="#">Follow</a>
            </div>
            <span class="d-block">@username</span>
          </div>
        </div>

しかしwebページを検証してページを拡大や収縮してみるとしっかりとレスポンシブ対応しています。
そこで質問なのですが、以上のどのクラス名でレスポンシブ対応するよう指定してあげているのでしょうか？
個人的にd-flexという記述が怪しい気もするのですが、、、、、
サンプル公式
この公式が出しているサンプル集の中ですと一番下のExperiments(実験)みたいなカテゴリの中にあるサンプルなので、bootstrapの新しい書き方として書かれているものなのでしょうか？<div class ="row">とrowを定義する記述がないことも気になります。。。
長くなってしまいましたがよろしくお願い致します。

Comments

[x_x]

どの部分のことでしょうか？ .containerならBootstrapにより幅が変化しますが

[madoka9393]

CSSのメディアクエリによるものとは別物ですか？

[widget11]

返信ありがとうございます。<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">やRecentUpdatesという箇所を括っている <div class="my-3 p-3 bg-white rounded shadow-sm">の箇所にcol-md-8のような記述がないことがきになっていたのですが、、、僕の知識不足かもしれませんが、、、Container内の要素は特に何もせずとも勝手に幅を変化させてくれるってことなのでしょうか？

Answer 1

レスポンシブ対応は以下のキャプチャの通りかと思います。
.containerに対してメディアクエリが指定されています。
![

.rowを使用していないのはflexboxのバグが関係あるみたいです。

Flexbug #12: Inline elements aren’t treated as flex items

Internet Explorer 10-11 do not render inline elements like links or images (or ::before and ::after pseudo-elements) as flex items. The only workaround is to set a non-inline display value (e.g., block, inline-block, or flex). We suggest using .d-flex, one of our display utilities, as an easy fix.

Source: Flexbugs on GitHub

IEではイメージなどのインライン要素はインライン以外の値を指定しないとflexアイテムとしてレンダリングされないようです。