title: screen split in 3 on bootstrap 4
body: <p>I am searching to split the screen into 3 sections</p>
  
  <p>On a wide screen:
  <a href="https://i.stack.imgur.com/ndF0u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ndF0u.png" alt="enter image description here"></a></p>
  
  <p>On small screen:</p>
  
  <p><a href="https://i.stack.imgur.com/t7OEE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t7OEE.png" alt="enter image description here"></a></p>
  
  <p>Any ideas to how to achieves this?
  I guess there is a combination of flexbox and the grid system but i am not able to figure it out.</p>
  
  <p>Edit: I just did a tentative using just the row and col but i am not sure that is the ideal solution</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>#left {
    height: 600px;
  }
  
  #righttop {
    height: 300px;
  }
  
  #rightbottom {
    height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
      &lt;link
        rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
        crossorigin="anonymous"
      /&gt;
      &lt;link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"
      /&gt;
      &lt;link rel="stylesheet" href="css/style.css" /&gt;
  
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6 bg-success" id="left"&gt;
            left part
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;div class="row bg-primary" id="righttop"&gt;first part right&lt;/div&gt;
            &lt;div class="row bg-warning" id="rightbottom"&gt;first part left&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
      &lt;script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
      &lt;script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>