Bootstrap columns and variable height paragraphs

Question

Using Bootstrap 3.3.7 and trying to flow 17 paragraphs of variable height into a 3 column (col-md-4) layout for high-resolution, 2 columns (col-sm-6) or 1 column (col-xs-12). Whether there are three or two columns, I'd like to end up with a layout that yields columns of close to the same height. Trying to create a flexible layout since the paragraph source is not static.

I tried:

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

But since the paragraphs are variable height, it didn't really work out the way I hoped. Is there any way to get the paragraphs to flow wherever there's space without leaving white space using Bootstrap alone? How about in combination with Sass?

Answer 1

Solved this using CSS media queries and getting rid of the Bootstrap classes.

/* 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
}