JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row flex">
  <div class="col-md-2">
    <img src="http://placehold.it/300x300" alt="" class="img-responsive">
    <p class="text-center channel-number">2</p>
  </div>
  <div class="col-md-2">
    <img src="http://placehold.it/300x100" alt="" class="img-responsive">
    <p class="text-center channel-number">4</p>
  </div>
  <div class="col-md-2">
    <img src="http://placehold.it/300x400" alt="" class="img-responsive">
    <p class="text-center channel-number">11</p>
  </div>
</div>

CSS

.flex {
  display: flex;
  min-height: 200px;
}

.flex > .col-md-2 {
  display: flex;
  flex-direction: column;
}

img { margin: auto;}