title: Bootstrap 4 layout help - get columns to expand to correct heights
body: <p>So I am trying to design a site. First time using bootstrap and I just cant figure out editing the heights properly and I feel like I just started learning coding from scratch. (I had taken a few years hiatus.)</p>
  
  <p>I am trying to get the page to look like this on above tablet(portrait size)</p>
  
  <p><strong>Above portrait size:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/u7rQS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u7rQS.png" alt="enter image description here"></a></p>
  
  <p>My goal for the larger size was to have the main body take up about 80% of the window and the footer/header take up the rest of the space. </p>
  
  <p>And trying to get it to look like this on the tablet(portrait) and smaller:</p>
  
  <p><strong>Below portrait size:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JK7FN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JK7FN.png" alt="enter image description here"></a></p>
  
  <p>My goal for this one was not to just have it go down below the image and make it scroll-able. </p>
  
  <p>Right now my code looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="keywords" content=""&gt;
    &lt;title&gt;The Last Names&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/bootstrap4.min.css"&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
    
  &lt;body&gt;
    
    &lt;nav class="navbar navbar-expand-md bg-dark navbar-dark"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Caitlyn &amp;amp; Jacob Team Up&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;About Us&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;The Bridal Party&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;RSVP&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Registry&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
      
        &lt;!-- Pictures will go here --&gt;
        &lt;div class="picmain col-12 col-md-6 bg-primary"&gt;
          &lt;h3&gt;pics here&lt;/h3&gt;
        &lt;/div&gt;
        
        &lt;!-- Info column row --&gt;
        &lt;div class="col-12 col-md-6"&gt;
          &lt;div class="row"&gt;
  
            &lt;!-- info 1 --&gt;
            &lt;div class="info1 col-12 bg-secondary"&gt;
              &lt;h3&gt;info1&lt;/h3&gt;
            &lt;/div&gt;
  
            &lt;!-- info 2 --&gt;
            &lt;div class="info2 col-12 bg-info"&gt;
              &lt;h3&gt;info2&lt;/h3&gt;
            &lt;/div&gt;
            
          &lt;/div&gt;
        &lt;/div&gt;
        
      &lt;/div&gt;
      
      &lt;div class="row"&gt;
        &lt;div class="footer col-12"&gt;Footer stuff will go here&lt;/div&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
    
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>can anyone help me figure out what I need to do to achieve what I was hoping for?
  Thank you :)</p>