Ещё одна возможность адаптивной разметки – способность легко выравнивать колонки по вертикали. Вертикальное выравнивание может быть применено по центру, сверху или снизу для целого ряда колонок, либо только для конкретных.

Как показано в примере, последнюю колонку каждого ряда мы сделали самой высокой по содержанию для наглядности работы механизма выравнивания по вертикали. По первому ряду видно, что он занимает высоту наивысшего из всех столбца в этом ряду.

 

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>