title: Bootstrap 4 flex alignment of columns
body: <p>I am totally confused. I had this figured out and then refreshed the jsfiddle and somehow the solution changed. I have a row with two columns in the row. I can't get the two columns to align on the same row. I tried using <code>justify-content-around</code> and it is not working. Help would be appreciated.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="d-flex flex-row justify-content-around my-flex-container"&gt;
      &lt;div class="d-flex flex-column my-flex-container-column"&gt;
        &lt;div class="flex-row my-flex-container"&gt;Row 1&lt;/div&gt;
        &lt;div class="flex-row my-flex-container"&gt;Row 2&lt;/div&gt;
        &lt;div class="flex-row my-flex-container"&gt;Row 3&lt;/div&gt;
        &lt;div class="flex-row my-flex-container"&gt;Row 4&lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="d-flex flex-column my-flex-container-column"&gt;
        &lt;div class="d-flex flex-row my-flex-container"&gt;
          &lt;div class="flex-column my-flex-container-column"&gt;
             &lt;div class="flex-row my-flex-container"&gt;Row 1
             &lt;/div&gt;
             &lt;div class="flex-row my-flex-container"&gt;Row 2
             &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="d-flex flex-row flex-1 my-flex-container"&gt;
          &lt;div class="my-auto"&gt;ROW 3&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ryanskene/x1hphsvb/364/" rel="nofollow noreferrer">jsfiddle here</a></p>