How to design Up stair grid layout in bootstrap - html

Question

I am designing a stair grid for showing the growth of a child in 4 up steps.
What I did is: created four rows containing 4 columns. From the first div, I removed the first three column and put content in fourth. Similarly, on next bottom div I put content in the third column then in next bottom filled the second column.
After all these, I put top margin negative so that it looks like a stair.
I know this is not a good approach. How can I improve that?
I want it to be like this:
Current code:
<!--Here i have used the last column and col-md-9 remains blank-->
<!-- First row -->
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 ml-md-auto bg-alert">
<img src="img/career/info2/4.png" class="img-responsive">
</div>
</div>
<!--Here i have used the second last column and col-md-6 remains blank-->
<!-- secondrow -->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3" style="margin-top:-14rem;">
<img src="img/career/info2/3.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
</div>
<!--Here i have used second column and remains blank-->
<!-- Third row -->
<div class="row">
<div class="col-md-3 ml-md-auto"></div>
<div class="col-md-3 ml-md-auto" style="margin-top:-37rem;">
<img src="img/career/info2/2.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
<div class="col-md-3 ml-md-auto"></div>
</div>
<!--Here i have used the first column and col-md-9 remains blank-->
<!-- Fourth row -->
<div class="row">
<div class="col-md-3">
<img src="img/career/info2/1.png" class="img-responsive">
</div>
<div class="col-md-9"></div>
</div>

Answer 1

Here's one way to solve this problem:
You put 4 columns into one single .row and then add 3 custom classes to the first 3 columns (.step-1 / .step-2 / .step-3).
Using #media (min-width: 768px) you ensure that those custom classes only kick in on medium (md) screens or larger. Then you add margin-top to each column as needed to push it down.
On screens that are smaller than md the 4 columns will stack up in the right order without any top margins affecting them.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#media (min-width: 768px) {
.step-1 {
margin-top: 150px;
}
.step-2 {
margin-top: 100px;
}
.step-3 {
margin-top: 50px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 step-1">Step 1</div>
<div class="col-md-3 step-2">Step 2</div>
<div class="col-md-3 step-3">Step 3</div>
<div class="col-md-3">Step 4</div>
</div>
</div>