Bootstrap4 で画像の下に文字を挿入したい

Question

CSS(bootstrap4)を使って下記のようなデザインを作りたいです。

col-md以上の時

col-sm以下の時

画像、説明文、別の説明文の3つで1セットとして、それを左右に表示させたいです。
画像、説明文だけの場合、class = cardを使えば実現できますが、
別の説明文を、その下にどのように表示すればいいかわからず苦戦しております。

下記が画像、説明文のコードです。

<div class="col-md-6">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-success">Design</strong>
              <h3 class="mb-0">
                <a class="text-dark" href="#">Post title</a>
              </h3>
              <div class="mb-1 text-muted">Nov 11</div>
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
              <a href="#">Continue reading</a>
            </div>
            <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
          </div>
        </div>

どなたかおわかりの方いらっしゃいましたら宜しくお願い致します。

Answer 1

下記で解決しました

@media all and (min-width:768px){
  .container-fluid{
      display:flex;
      flex-direction:row;
  }
  .row{
      flex-direction:column;
  }
}

.row{
     display:flex;
}