title: Bootstrap columns stacking when they shouldn't be
body: <p>I'm trying to learn bootstraps grid system.  From what I understand about the grid system, the code below should produce 2 columns.  One column with 3 rows on the left, and one column with 1 row on the right and they should never stack.  Unfortunately, this is not the case and rather than never stacking, they are always stacked and no matter what I try, I can't get the result I want.  Does anyone see any issues with this code or is it something deeper that I need to look into?</p>
  
  <p>I thought it might be something to do with my display/viewport size, but <a href="http://viewportsizes.com/mine/" rel="nofollow noreferrer">http://viewportsizes.com/mine/</a> says my viewport size is 1707 x 961, which from what I understand should not be small enough to force the columns to stack.</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Overhead&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="col-6"&gt;
              &lt;div class="row"&gt;
                  Top Left
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  Middle Left
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  Bottom Left
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-6"&gt;
              Right
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>