グリッドレイアウトのついて学ぼう②♪


なかなかの自信作の紹介です♪

スマホ画面時
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/539d8158-2c6f-a409-4368-e3e8a75555a6.png" width=70%>

ＰＣ画面時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/3224e261-06e4-49f8-be31-c5cbd5ee3d88.png)

```html
<main>
    <section class="py-4">
      <h2 class="text-center text-info mb-5">作品紹介</h2>

      <div class="container">

        <div class="row">

          <div class="mb-5 col-xl-6">
            <h1 class="center mb-3 ">TOYSTORY</h1>
            <div class="center mb-4 "><img src="img/toystory1.jpg" class="w-100 rounded-circle"></div>
            <p class="">『トイ・ストーリー』はピクサー制作のディズニー映画で1995年にシーズン1が公開され、その後シーズン2.3が公開された人気ディズニー映画です。
              本作は普段、子供に遊ばれているおもちゃが人格を持っていておもちゃたちが冒険する物語。カウボーイのおもちゃ・ウッディの日本語版の吹き替えは唐沢寿明、スペースレンジャー・バズライトイヤーの日本語版の吹き替えは所ジョージが務めています。
            </p>
            <div class="text-center">
              <a href="#" class="btn btn-primary btn-lg mr-md-5 mr-xl-3">キャラクター紹介</a>
              <a href="#" class="btn btn-info btn-lg mr-md-5 mr-xl-3">感想・レビュー</a>
              <a href="#" class="btn btn-danger btn-lg mr-md-5 mr-xl-3">ネタばれ</a>
            </div>
          </div>

          <div class="mb-5 col-xl-6">
            <h1 class="center mb-3 ">TOYSTORY2</h1>
            <div class="center mb-4 col-lg-8 col-xl-12"><img src="img/toystory2.jpg" class="w-100 rounded-circle"></div>
            <p class="">アンディの部屋のおもちゃ－カウボーイ人形のウッディとスペースレンジャーのバズは、今日も仲間と楽しい時間を過ごしていた。ところがある日、バザーに売りに出されたペンギン人形のウィージーを助けに行ったウッディが、通 りすがりの男に盗まれてしまう。ウッディ略奪犯、それはおもちゃ屋のアルという男だった。バズたち仲間は親友の救出を計画、アルのおもちゃ屋に向かう。一方アルのマンションに連れてこられたウッディは、自分がプレミア人形であることを知る。</p>
            <div class="text-center">
              <a href="#" class="btn btn-primary btn-lg mr-md-5 mr-xl-3">キャラクター紹介</a>
              <a href="#" class="btn btn-info btn-lg mr-md-5 mr-xl-3">感想・レビュー</a>
              <a href="#" class="btn btn-danger btn-lg mr-md-5 mr-xl-3">ネタばれ</a>
            </div>
          </div>

          <div class="mb-5 col-xl-6">
            <h1 class="center mb-3 ">TOYSTORY3</h1>
            <div class="center mb-4"><img src="img/toystory3.jpg" class="w-100 rounded-circle"></div>
            <p>おもちゃの世界を舞台にしたピクサーの人気シリーズの第3弾にして初の3D映画。カウボーイ人形のウッディやバズ・ライトイヤーらの持ち主アンディは大学進学が決定し、おもちゃを整理することに。だが母親の手違いなどにより、おもちゃたちは近所の保育園に寄付されてしまう。アンディに捨てられたと思いこみ傷心のおもちゃたちだったが、ウッディはただ一人アンディを信じて保育園からの脱出を試みる。製作総指揮にジョン・ラセター。監督は「モンスターズ・インク」のリー・アンクリッチ。</p>
            <div class="text-center">
              <a href="#" class="btn btn-primary btn-lg mr-md-5 mr-xl-3">キャラクター紹介</a>
              <a href="#" class="btn btn-info btn-lg mr-md-5 mr-xl-3">感想・レビュー</a>
              <a href="#" class="btn btn-danger btn-lg mr-md-5 mr-xl-3">ネタばれ</a>
            </div>
          </div>

          <div class="mb-5 col-xl-6">
            <h1 class="center mb-3 ">TOYSTORY４</h1>
            <div class="center mb-4"><img src="img/toystory.jpg" class= "w-100 rounded-circle"></div>
            <p>おもちゃの世界を舞台に描くピクサー・アニメーションの大ヒットシリーズ「トイ・ストーリー」の第4作。ウッディたちの新しい持ち主となった女の子ボニーは、幼稚園の工作で作ったフォーキーを家に持ち帰る。ボニーの今一番のお気に入りであるフォーキーを仲間たちに快く紹介するウッディだったが、フォークやモールでできたフォーキーは自分を「ゴミ」だと認識し、ゴミ箱に捨てられようとボニーのもとを逃げ出してしまう。フォーキーを連れ戻しに行ったウッディは、その帰り道に通りがかったアンティークショップで、かつての仲間であるボー・ピープのランプを発見する。</p>
            <div class="text-center">
              <a href="#" class="btn btn-primary btn-lg mr-md-5 mr-xl-3">キャラクター紹介</a>
              <a href="#" class="btn btn-info btn-lg mr-md-5 mr-xl-3">感想・レビュー</a>
              <a href="#" class="btn btn-danger btn-lg mr-md-5 mr-xl-3">ネタばれ</a>
            </div>
          </div>

        </div>

      </div>
    </div>
  </section>
</main>
```
#orderでの順序指定
order-sm-1やorder-sm-2と指定すると、カラムの順番を入れ替えることができます。
使いたかったが、今回は保留♪