ブートストラップ列と可変高さ段落

Question

ブートストラップ3.3.7を使用し、17段落を可変高さで3列（col-md-4）レイアウトに高解像度2列（col-sm-6）または1列（col-xs-12）である。 3つまたは2つの列があるかどうかにかかわらず、私は同じ高さに近い列を生成するレイアウトにしたいと思います。段落ソースは静的ではないので、柔軟なレイアウトを作成しようとしています。

私が試した：

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

をしかし、段落が可変の高さなので、それは本当に私が望んだ道をうまくいきませんでした。ブートストラップだけを使って空白を残すことなく、スペースがあれば段落を流すための方法はありますか？ 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 
}