如何在bootstrap中设计楼梯网格布局

Question

我正在设计一个阶梯网格，以4个步骤显示孩子的成长。

我所做的是：创建包含4列的四行。从第一个div开始，我删除了前三列并将内容放在第四列。类似地，在下一个底部div上，我将内容放在第三列，然后在下一个底部填充第二列。

在所有这些之后，我将上边距设为负值，使其看起来像楼梯。

我知道这不是一个好方法。我该如何改进？

我希望它是这样的：

当前代码：

<!--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>