Avoid reflow of css3 columns after they have been drawn

Avoid reflow of css3 columns after they have been drawn

I am using css3 columns to display an unordered list in 3 columns. The
list items contain lists as well that can be shown or hidden by clicking
on the title using jQuery.
The html looks like (with class names to describe the layout and
interactions):
<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>
<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>
This works, but every time a sub-list is opened or closed, the columns get
redrawn.
I would like to freeze the columns after they have initially been drawn to
avoid this reflow so that every item stays in the column it is initially
drawn in.
I can of course write a masonry-like solution in javascript to convert my
list in 3 lists that are displayed next to each other, but I was hoping
that there was an easier solution, preferably in just css or in javascript
that keeps my list as a list.
Is that possible or would I just have to rewrite the DOM?