Q:

How to replicate this (pictured) layout using css or bootstrap

My Problem
I am new to Bootstrap.  My boss wants me to replicate the following screen ( or as close as possible ):
Desired Layout

I have tried to do this myself using:
<div class = "row"> 

and

<div class = "col-lg-x">

... but I can't get the rows and columns right!  So frustrating.  I have tried and tried and tried. 
Does anyone have any ideas how I would replicate the following layout easily? 
Thank you so much for looking at my problem. 
Regards,
John

A:

Not sure if it's the way that you have put your code on to SO however it should look something like this
<div class="row">
 <div class="col-sm-4">
  4
 </div>
 <div class="col-sm-8">
  <div class="row">
   <div class="col-12 col-sm-12">
    12
   <div class="row">
    <div class-"col-sm-4">
      4
    </div>
    <div class="col-sm-8">
      8
    </div>
  </div>
</div>

Edit: You may also wish to take a look at nesting to help you achieve this https://getbootstrap.com/docs/4.0/layout/grid/

