Encontrei a solução com o seguinte código:
.main-wrapper {
height: 100vh;
}
.section {
height: 100%;
background-color: red;
}
@media (max-width: 768px) {
.section {
height: 30%;auto;
background-color: red;
}
}
<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>