在CSS列中保持兄弟元素在一起

Question

如何将兄弟元素保持在一起，而不将它们包装在包装元素中？我尝试使用break-before和break-after属性但没有成功（在Chromium 53上测试）。

在下面的例子中，它在h2之后断开，虽然我明确地告诉它不要。

＆＃13;

＆＃13;

.column {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 3;
  -moz-column-fill: auto;
  /* Firefox */
  column-fill: auto;
}
.column h2,
.column p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.column h2 {
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
  break-after: avoid;
}
.column p {
  -webkit-column-break-before: avoid;
  page-break-before: avoid;
  break-before: avoid;
}

＆＃13;

<div class="column column--big">
  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>
  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>

  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>

  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>
</div>

＆＃13;

＆＃13;

＆＃13;