Podrías construir una estructura similar a lo que buscas solamente con Boostrap, aprovechándote de su sistema de grid.
Los contenedores de colores son solamente para ilustrar el ejemplo. Para poder ver el salto entre dispositivos tendrías que reproducir el ejemplo en modo pantalla completa.
.contenedor {
display: block;
width: 100%;
height: 100%;
padding: 50px 0;
}
.naranja {
background-color: orange;
}
.verde {
background-color: green;
}
.violeta {
background-color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-5">
<div class="contenedor naranja"></div>
</div>
<div class="col-12 col-sm-7">
<div class="row">
<div class="col-6 col-sm-12">
<div class="contenedor verde"></div>
</div>
<div class="col-6 col-sm-12">
<div class="contenedor violeta"></div>
</div>
</div>
</div>
</div>
</div>