title: Column-count list reorders when expanding child items
body: <p>I'm using <code>column-count: 3</code> to divide a list into three columns and styles each list item with <code>display: inline-block</code> to keep the list item´s children in the same column. The children are hidden with <code>max-height</code> and <code>overflow: hidden</code>.</p>
  
  <p>I want to expand and show the children on click by setting <code>max-height: none</code>, but since column-count tries to evenly balance all columns dynamically the list gets reordered. I understand that's what column-count is for.</p>
  
  <p>I would like to use something similar to <code>column-count: 3</code> but "lock" it after page load so it doesn't reorder when expanding children. Would that be possible without splitting the items into three different lists? The <em>only</em> requirement is that it works on IE11.</p>
  
  <p><a href="http://codepen.io/calsal/pen/QpRmRN" rel="nofollow noreferrer">Here is my codepen demo</a> to illustrate the problem. </p>