Twitter Bootstrap вывод блоков в виде «плитки»

Для того, чтобы вывести блоки Bootstrap в виде адаптивной плитки (её еще называют «METRO-интерфейс», есть разные решения, даже разработаны специальные библиотеки:

• METRO UI CSS
• BootMetro
• Masonry
• и другие...

Но я хочу показать самый простой и грубый способ. Сразу оговорюсь, что рассмотрим очень частный случай - вывод блоков только в две колонки. Для большего числа колонок подход другой, я рассмотрю этот случай позже. В чём плюс предлагаемого мной решения: порядок вывода блоков - горизонтальный. То есть слева - первый, справа второй, ниже слева третий, ниже справа четвёртый и так далее.



Всё просто - все чётные ячейки делаем плавающими справа, а нечетные - плавающими слева.

<style>
 .col-md-6:nth-child(odd) {
  clear: left;
  float:left;
  width:49%;
}
.col-md-6:nth-child(even) {
  clear: right;
  float:right;
  width:49%;
}
</style>
<div class="container">
  <div class="row">
    <div class="col-md-6 well">
      Article 1<br>
    </div>
    <div class="col-md-6 well">
      Article 2<br><br><br><br><br>
    </div>  
    <div class="col-md-6 well">
      Article 3<br><br><br><br>
    </div>
    <div class="col-md-6 well">
      Article 4<br><br>
    </div>
    <div class="col-md-6 well">
      Article 5<br><br><br><br><br><br>
    </div>
    <div class="col-md-6 well">
      Article 6<br><br><br><br>
    </div>
  </div>
</div>

Вот исходный код на поиграться: http://www.bootply.com/fVWj86N01a