<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container" style="width:900px;padding-top: 50px;">
<div class="row">
<div class="col-6"><div class="plate">col-6 (L 50%)<img class="card-img" src="http://placehold.it/400x500" alt=""></div><br>
<div class="row">
<div class="col-6"><div class="plate">col-6 (L 50%)<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div>
<div class="col-6"><div class="plate">col-6 (L 50%)<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div>
</div>
</div>
<div class="col-6"><div class="plate">col-6 (R 50%)<img class="card-img" src="http://placehold.it/600x400" alt=""></div><br>
<div class="row">
<div class="col-7"><div class="plate">R 60%<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div>
<div class="col-5"><div class="plate">R 40%<img class="card-img" src="http://placehold.it/400x605" alt=""></div></div>
</div><br>
<div class="row">
<div class="col-5"><div class="plate">R 40%<img class="card-img" src="http://placehold.it/400x605" alt=""></div></div>
<div class="col-7"><div class="plate">R 60%<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div>
</div><br>
<div class="row">
<div class="col-12"><div class="plate">R 100%<img class="card-img" src="http://placehold.it/700x400" alt=""></div></div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col"><div class="plate">col 100%<img class="card-img" src="http://placehold.it/800x200" alt="">Nested columns won't gives you full width to access. Reverse is possible</div></div>
</div>
