Начальные столбцы и абзацы переменной высоты

Question

Использование Bootstrap 3.3.7 и попытка передать 17 абзацев переменной высоты в макет с 3 столбцами (col-md-4) для высокого разрешения, 2 столбцами (col-sm-6) или 1 столбцом (col-xs-12), Независимо от того, есть три или два столбца, я бы хотел получить макет, в котором столбцы будут иметь одинаковую высоту. Попытка создать гибкий макет, поскольку источник абзаца не является статичным.

Я старался:

<p class="col-md-4 col-sm-6 col-xs-12">...</p>

Но поскольку абзацы имеют переменную высоту, это не сработало так, как я надеялся. Есть ли способ заставить абзацы перемещаться туда, где есть место, не оставляя пробелов, используя только Bootstrap? Как насчет в сочетании с Sass?

Answer 1

Решил это с помощью медиазапросов CSS и избавившись от классов Bootstrap.

/* Extra small */
@media (min-width: 480px) {
  .faqs {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

/* Small */
@media (min-width: 768px) {
  .faqs {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

/* Medium */
@media (min-width: 992px) {
  .faqs {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

/* Large */
@media (min-width: 1200px) {
  .faqs {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

article {
  break-inside: avoid-column; // keep articles together
}