title: Apply vuejs transition-group to Bootstrap grid
body: <p>I am trying to apply vuejs transitions to Bootstrap grids but it totally screw up the grid system because the transition-group modifies the DOM and adds a new tag between the <code>row</code> and <code>col-md-6</code> tags. example:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;transition-group name="list"&gt;
      &lt;div class="col-md-6" v-for="product in products" :key="product.id"&gt;\ 
        My product content here
      &lt;/div&gt;
    &lt;/transition-group&gt;
  </code></pre>
  
  <p></p>
  
  <p>When this is rendered, it is modified to:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;span&gt;
      &lt;div class="col-md-6" v-for="product in products" :key="product.id"&gt;\ 
        My product content here
      &lt;/div&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The new <code>span</code> tag messes up with the grid system, since <code>.col-md-6</code> is no longer a direct child of the <code>.row</code>.</p>
  
  <p>Anyone knows a workaround for this that still uses Bootstrap grids?</p>