title: Bootstrap: unequal columns on stacked
body: <p>I'm trying to get a 50/50 layout, with half the row filled with a picture and half the row has text. It currently works on desktop, laptop, and tablet. On mobile (when its stacked) though, the image isn't half the row for some reason.</p>
  
  <p>Can someone explain why?</p>
  
  <p><a href="https://imgur.com/a/FNTzWwE" rel="nofollow noreferrer">https://imgur.com/a/FNTzWwE</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
                  &lt;div class="row row_box grey"&gt;
                      &lt;div class="col-md-6 padding_0"&gt;
                          &lt;div class="homepage_imgs meats"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 homepage_text"&gt;
                          &lt;p class="homepage_headers"&gt;Meats&lt;/p&gt;
                          &lt;p class="homepage_subheaders"&gt;Steak, Chicken, Fish, Burger, Eggs, Turkey&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.row_box
  {
      height:88vh;
      height:calc(var(--vh, 1vh) * 88);
  }
  .grey
  {
      background-color:#e6e6e6;
  }
  .padding_0
  {
      padding:0;
  }
  .order
  {
      order: 2;
  }
  .homepage_imgs
  {
    height: 100%;
    background-position: center;
    background-size: cover;
  }
  .meats
  {
      background-image: url("beef-cuisine-cut-1881336.jpg");
  
  .homepage_text
  {
      display:flex;
      justify-content:center;
      text-align:center;
      align-items:center;
      flex-direction: column;
      font-family: 'Montserrat', sans-serif;
      color: #404040;
      hyphens: auto;
  }
  .homepage_headers
  {
      font-size: calc(5em + .5vw);
      color: #e67300;
  }
  .homepage_subheaders
  {
      font-size: calc(1.5em + .5vw);
  }
  </code></pre>
  
  <p>Thanks!</p>