title: Bootstrap 4 alpha 6: collapsed two divs side by side are stacked when expanded
body: <p>I'm experimenting with Bootstrap 4 alpha 6 for a non-critical project and came across some odd behaviour. Collapsed divs that should be displayed side-by-side are stacked when they are expanded.</p>
  
  <p>Here are the exact steps to reproduce the problem (see full working example below):</p>
  
  <ol>
  <li>Create a <code>col-12</code> div containing two <code>col-6</code> divs. As with the pink and yellow divs in my example, the two narrow divs will sit side by side.</li>
  <li>Add a link above the divs and set it up to <code>collapse</code> the <code>col-12</code> div (like the <code>Expand</code> link in the example)</li>
  <li>When you expand the divs, you'll note that the two <code>col-6</code> divs are displayed side by side for a split second and then suddenly end up stacked one on top of the other.</li>
  </ol>
  
  <p>I realise this is probably just a bug that will be fixed when Bootstrap 4 gets nearer the final version, but I'm wondering if anyone has a suggestion to fix this in the meantime.</p>
  
  <p>I did try various permutations of overriding the CSS in my browser development tools but I can't see what style setting is making the right-hand div drop under the left one like that, and the slight delay makes me think maybe it's a JavaScript problem instead. Or maybe it's my crummy HTML!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body class="container" style="margin-top: 40px;"&gt;
      &lt;div class="row col-12"&gt;
        &lt;!-- Title and authors --&gt;
        &lt;h4 class="col"&gt;
          &lt;a href="#details" data-toggle="collapse" aria-expanded="true"&gt;
              &lt;span&gt;Expand&lt;/span&gt;
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div id="details" class="row collapse" aria-expanded="true"&gt;
        &lt;div class="col col-6" style="background-color: lightblue;"&gt;
          &lt;h3&gt;Text on the left&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, iusto fuisset ea pri.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col col-6" style="background-color: lightgreen;"&gt;
          &lt;h3&gt;Text on the right&lt;/h3&gt;
          &lt;p&gt;Cu sed latine tacimates maluisset, nibh.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row" aria-expanded="true"&gt;
        &lt;div class="col col-6" style="background-color: lightpink;"&gt;
          &lt;h3&gt;Exact same as collapsed area above but no collapse&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, iusto fuisset ea pri.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col col-6" style="background-color: lightyellow;"&gt;
          &lt;h3&gt;Text on the bottom right&lt;/h3&gt;
          &lt;p&gt;Cu sed latine tacimates maluisset, nibh.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>