Encontrei a solução com o seguinte código:





<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .main-wrapper {
      height: 100vh;
    }

    .section {
      height: 100%;
      background-color: red;
    }

    @media (max-width: 768px) {
      .section {
        height: auto;
        background-color: red;
      }
    }

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <div class="main-wrapper">
      <div class="col-sm-4 section">
        <div class="esquerda">
          Conteudo da esquerda
        </div>
      </div>
      <div class="col-sm-8">
        <div class="direita">
          Conteudo da direita
        </div>
      </div>
    </div>

<!-- end snippet -->