wordpress／個別投稿ページでbootstrapのカラムを使いたい・・・

Question

wordpressの個別投稿ページで下記内容を実現したいのですが、
やり方がわかりません・・・。

カスタム投稿タイプで追加した個別投稿ページで下記レイアウトを実現したいです。

・画像を２カラムで横並び
・Role/Date/Agencyの３カラムに分けて記載
※それぞれbootstrapで記載しています。

このレイアウトをできればブロックエディタでそれぞれ画像挿入、テキスト記入でこのようにしたいのですが、
可能でしょうか？？

ちなみにコードは下記です。

                    <div class="col-md-6 col-sm-6">
                         <img src="images/portfolio-img2.jpg" class="img-responsive" alt="Portfolio">
                    </div>

                    <div class="col-md-6 col-sm-6">
                         <img src="images/portfolio-img3.jpg" class="img-responsive" alt="Portfolio">
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-md-4 col-sm-4">
                         <h3>Role</h3>
                         <p>Brand Identity</p>
                    </div>

                    <div class="col-md-4 col-sm-4">
                         <h3>Date</h3>
                         <p>December, 2015</p>
                    </div>

                    <div class="col-md-4 col-sm-4">
                         <h3>Agency</h3>
                         <p>Client Name here</p>
                    </div>

お手数ですがよろしくお願いいたします。

Answer 1

ちゃんと確認していないですが普通はこんな感じで書くと思います。

bootstrapのカラムについて

Bootstrapはカラム単体の理解ではなく、gridシステムを理解した方が良いと思います。

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
http://websae.net/twitter-bootstrap-grid-system-21060224/

  <div class="container">
    <div class="row">
      
      <div class="col-md-6 col-6">
        <img src="images/portfolio-img2.jpg" class="img-responsive" alt="Portfolio">
      </div>

      <div class="col-md-6 col-6">
        <img src="images/portfolio-img3.jpg" class="img-responsive" alt="Portfolio">
      </div>

    </div><!--row-->

    <div class="row">

      <div class="col-md-4 col-4">
        <h3>Role</h3>
        <p>Brand Identity</p>
      </div>

      <div class="col-md-4 col-4">
        <h3>Date</h3>
        <p>December, 2015</p>
      </div>

      <div class="col-md-4 col-4">
        <h3>Agency</h3>
        <p>Client Name here</p>
      </div>

    </div><!--row-->
  </div><!--container-->