javascript - 描画後の css3 列のリフローを避ける

Question

css3 列を使用して、順序付けられていないリストを 3 列で表示しています。リスト項目には、jQuery を使用してタイトルをクリックして表示または非表示にできるリストも含まれています。

HTML は次のようになります (レイアウトと相互作用を説明するクラス名を使用):

<ul class="i-display-in-3-columns">
  <li>
    <h3 class="slide-toggle-sibling-list-on-click">column title 1</h3>
    <ul class="i-am-initially-hidden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </li>
  <li>
    <h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3>
    <p>This can be very long with perhaps an additional paragraph as well.</p>
    <ul class="i-am-initially-hidden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </li>
  /* some more items */
</ul>

これは機能しますが、サブリストが開いたり閉じたりするたびに、列が再描画されます。

このリフローを回避するために、最初に描画された後に列をフリーズして、すべてのアイテムが最初に描画された列にとどまるようにしたいと思います。

もちろん、リストを隣り合わせに表示される 3 つのリストに変換するために、JavaScript で石積みのようなソリューションを作成することもできますが、できれば css または JavaScript でリストを保持するより簡単なソリューションがあることを望んでいました。リスト。

それは可能ですか、それとも DOM を書き直す必要がありますか?