Aligning title, icon and content using Bootstrap 3

Question

Using Bootstrap 3.3.7, in a section with four columns, I'm trying to figure out how to align the a) titles of varying length, b) icons, which are located beneath the titles, and c) the unordered list, which are beneath the icons. I'm using Flex to keep all four columns the same height.

The titles should be vertically-aligned to the middle. Here's what I have so far (JSFiddle link: 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

I guess this solution will work for you, but you need to define average height for h4 element, I made it 90px here

height: 90px; vertical-align: middle; display: table-cell;