ブートストラップ3を使用してタイトル、アイコン、コンテンツを整列する

Question

ブートストラップ3.3.7を使用して、4列のセクションで、a）さまざまな長さのタイトル、b）配置されているアイコンタイトルの下に、c）アイコンの下にある順序付けられていないリスト。私はすべての4列を同じ高さに保つためにFlexを使用しています。

タイトルは、縦に中央に合わせる必要があります。ここに私がこれまで持っているものがあります（JSFiddleリンク：https://jsfiddle.net/Codewalker/8xay3cow/）。

<div class="container"> 
     <div class="row is-flex vdivider"> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Column Number 1</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Elongated Second Column Title</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
         <li>Bullet Twelve</li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Three Communications</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Column Four</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.secCallOut2 { 
height:100%; 
margin-top:0; 
padding:20px; 
} 
.secCallOut2 h4 { 
    color:#009FDA; 
    margin:0 14px 12px; 
} 
.secCallOut2 p { 
    color:#fff; 
} 
.row.is-flex { 
    display: flex; 
    flex-wrap: wrap; 
} 
.row.is-flex > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
} 
.row.is-flex { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
.row.is-flex > [class*='col-'] { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
} 
.row.vdivider [class*='col-']:not(:last-child):after { 
    background: #e0e0e0; 
    width: 1px; 
    content: ""; 
    display:block; 
    position: absolute; 
    top:0; 
    bottom: 0; 
    right: 0; 
    height:95%; 
} 

Answer 1

私はこのソリューションは、あなたのために働くだろうと思いますが、あなたはh4要素の平均高さを定義する必要があり、私はあなたが必要

にここでそれ90pxheight: 90px; vertical-align: middle; display: table-cell;