title: How to make fluid layout using Bootstrap4
body: <p>I'm switching to bootstrap4 today. I enabled flexbox in <code>_variables.scss</code> yet I'm confused about what exactly is flexbox capabilities of bootstrap4. For example </p>
  
  <ol>
  <li>How can I make <code>flex-direction:column</code>?</li>
  <li>Is it possible to have a column with fluid width? <code>flex-grow</code>?</li>
  </ol>
  
  <p>I have this markup to build a full height sidebar layout</p>
  
  <pre><code>&lt;div class="flex-col"&gt;
  
   &lt;div class="flex-row" id="topnav"&gt;
    &lt;div class="flex"&gt; &lt;!-- this will grow --&gt;
      Brand
    &lt;/div&gt;
  
    &lt;div&gt; left navbar&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class=" flex flex-row"&gt; &lt;!--flex expand to fill full height --&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
    &lt;div class="flex"&gt;Content&lt;/div&gt; &lt;!--take rest of row space--&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I achieve this with bootstrap flexbox?</p>