title: How to design Up stair grid layout in bootstrap
body: <p>I am designing a stair grid for showing the growth of a child in 4 up steps.</p>
  
  <p>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. </p>
  
  <p>After all these, I put top margin negative so that it looks like a stair. </p>
  
  <p>I know this is not a good approach. How can I improve that?</p>
  
  <p>I want it to be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9ZWV6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZWV6.png" alt="enter image description here"></a></p>
  
  <p>Current code:</p>
  
  <pre><code>&lt;!--Here i have used the last column and col-md-9 remains blank--&gt;
  &lt;!-- First row --&gt; 
  &lt;div class="row"&gt;
      &lt;div class="col-md-9"&gt;&lt;/div&gt;
      &lt;div class="col-md-3 ml-md-auto bg-alert"&gt;
          &lt;img src="img/career/info2/4.png" class="img-responsive"&gt;      
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Here i have used the second last column and col-md-6 remains blank--&gt;
  &lt;!-- secondrow --&gt; 
  &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;&lt;/div&gt;
      &lt;div class="col-md-3" style="margin-top:-14rem;"&gt;
          &lt;img src="img/career/info2/3.png" class="img-responsive"&gt;     
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Here i have used second column and  remains blank--&gt;
  &lt;!-- Third row --&gt;  
  &lt;div class="row"&gt;
      &lt;div class="col-md-3 ml-md-auto"&gt;&lt;/div&gt;
      &lt;div class="col-md-3 ml-md-auto" style="margin-top:-37rem;"&gt;
          &lt;img src="img/career/info2/2.png" class="img-responsive"&gt;      
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;&lt;/div&gt;
      &lt;div class="col-md-3 ml-md-auto"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Here i have used the first column and col-md-9 remains blank--&gt;
  &lt;!-- Fourth row --&gt; 
  &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
          &lt;img src="img/career/info2/1.png" class="img-responsive"&gt;      
      &lt;/div&gt;
      &lt;div class="col-md-9"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>