Столбец сетки начальной загрузки не работает должным образом на устройствах sm и xs

Question

В строке 4 изображения, в ней 4 изображения, как и ожидалось.На устройствах sm и xs должно отображаться 4 изображения в сетке 2 x 2 (два столбца и две строки, но третье изображение не выравнивается должным образом, оно далеко от сетки.

https://jsfiddle.net/fjqcb2h6/

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="row countdown-row" style="margin-bottom: 60px;">
  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('#');" class="img-fluid hvr-grow" style="width:130px;cursor:pointer;" src="images/computer.png">
          <figcaption style="padding-top: 20px; font-size: 16px;"><a href="#" target="_blank">dsfdsfdsfdsf</a></figcaption>
      </figure>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('#');" class="img-fluid hvr-grow" style="cursor:pointer; width:115px;" src="images/edu.png">
          <figcaption class="img-fluid" style="padding-top: 10px; font-size: 16px;"><a href="#" target="_blank">dsfsfsdfsdfdsfsdf</a></figcaption>
      </figure>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('#');" class="img-fluid hvr-grow" style="cursor:pointer; width:120px;" src="images/kidz.png">
          <figcaption style="padding-top: 10px; font-size: 16px;"><a href="http://#"target="_blank">sdfdsfsd</a></figcaption>
      </figure>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('http://#');" class="img-fluid hvr-grow" style="cursor:pointer; width:115px;" src="images/mindacti.png">
          <figcaption style="padding-top: 10px; font-size: 16px;"><a href="#">dsfdsfsdfActivation</a></figcaption>
      </figure>
  </div>

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

Answer 1

Это связано с различной высотой элементов.

Применение высоты к столбцам child (в данном случае <figure>) будетрешить проблему.Обратите внимание, что высота должна быть равна или больше, чем у верхнего столбца-потомка.

figure {
  height: 200px;
}

Answer 2

Добавить следующий стиль

.countdown-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}