title: Bootstrap 4 Grid not floating columns?
body: <p>I've used BS 3 in the past but am completely new to BS 4 &amp; flex; don't really understand it yet. I've set the grid up as it's shown in the documentation but the second col is appearing below the first, rather than to the right. </p>
  
  <p>I've tried adjusting display properties for the row with no luck but don't really know what else to try</p>
  
  <p>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-css lang-css prettyprint-override"><code>#hero {
    height: 30em;
    background-color: #373f51;
  }
  
  #hero-graphic {
    background-color: #DAA49A;
  }
  
  #avatar {
    width: 20%;
  }
  
  #intro-text {
    background-color: #DAA49A;
    padding: 1em;
    margin: 1em;
    border-radius: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid d-flex align-items-center" id="hero"&gt;
    &lt;div class="row " id="hero-row"&gt;
      &lt;div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="intro-text"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="hero-graphic"&gt;
        &lt;img src="images/avatar.png" alt="" id="avatar"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>No error messages</p>