如何在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

这是解决此问题的一种方法：

您将4列放入一个.row中，然后在前3列（.step-1 / .step-2 / .step-3）中添加3个自定义类。

使用@media (min-width: 768px)，您可以确保这些自定义类仅适用于中型（md）或更大的屏幕。然后根据需要将margin-top添加到每个列以将其向下推。

在小于md的屏幕上，4列将以正确的顺序堆叠，而没有任何顶部边距影响它们。

点击下面的“运行代码段”按钮，然后展开到完整页面：

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