Is it possible for Ember Liquid Fire to hide a bootstrap column?

I have a layout with a number of columns as follows:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      //col content
    </div>
    <div class="col">
      //col content
    </div>
    <div class="col">
      //col content
    </div>
  </div>
</div>

I'd like to use Liquid Fire to hide some columns based on a property, something like this:

    
    <div class="col">
      //col content
    </div>
    

However this breaks the flex sizing of the row. The column that is the subject of the liquid-if is rendered very small when visible whilst the others size according to flex.

I think this is because Liquid-Fire creates it's own <div class="liquid-container"> and <div class="liquid-child"> which is breaking what Bootstrap expects for flex sizing.

With that in mind I tried to add the col class to the invocation:

    

      //col content

    

But when the property changes the content clears and the empty column remains in the DOM.

Is there anything I can do here? I don't really know any other way to animate DOM removals.