CSSの列 ​​- 強制ブレーク要素が列

Question

の一番下にある場合、私は{activity_type_copy}はどのクライアント入力の段落とH3タグ

<article class="copy-container"> 
    <div class="col-sm-12 columns-3"> 
     {activity_type_copy} 
    </div><!-- /.col-sm-12columns-3 --> 
</article><!-- /.col-sm-12 --> 

CMSのカスタムフィールドの列-3で、次のコードを持っていますクラスはcolumn-count：3のセットを持っていますが、これは素晴らしいです。しかし、いくつかの画面サイズでは、h3タグは、私が避けたい列の最下部にあります。スクリーンショットをご覧ください：

h3タグが列の最後の要素である場合、次の列に移動させる方法はありますか？

Answer 1

私はclear：both; display：block;各列ごとにあなたのCSSに。
ulまたはliラッパーを使用して、列ヘッダーの下にあるテキストに「バインド」されていますか？

@Oriolは正しいですが、ページ幅ごとに非常に多くの列を持つことができます。任意の「混雑」は列を強制的に他の列の下に降下させます。

Answer 2

CSS Fragmentationによると、あなたはまた、old aliases

を使用し、より優れた互換性のため

break-after: avoid; 

と休憩のすべての種類を防ぐことができます

break-after: avoid-column; 

でちょうど要素の後に列の区切りを防ぐことができます

page-break-after: avoid; 

これは、 lブラウザ。