обычный html\css тоже справляется
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html{height:100px;margin:0;padding:0;}
body{margin:0;padding:0;}
.L1,.R1,.L2,.R2,.L3,.R3{display:inline-block;}
.L1,.L3,.R2{background-color:#EEE;}
.L1,.R1,.L2,.R2,.L3,.R3{width:100%;}
.dr{float:right;width:50%;}
.dl{float:left;width:50%;}
@media screen and (max-width : 600px){.dr,.dl{float:none !important;width:100% !important;}
.L1,.R1,.L2,.R2,.L3,.R3{display:block;}}
</style>
</head>
<body>
<div class="dl">
<div class="L1">L1
<pre><br><br><br><br><br></pre>
</div>
<div class="L2">L2
</div>
<div class="L3">L3
<pre><br><br><br><br><br></pre>
</div>
</div>
<div class="dr">
<div class="R1">R1
</div>
<div class="R2">R2
<pre><br><br><br><br><br></pre>
</div>
<div class="R3">R3
</div>
</div>
</body>
</html>
пример на codepen