使用引导和HTML正确布局网页

Question

我正在努力学习html和CSS的引导程序。

下面的代码如下所示：

<div class="container">
  <div class="row text-center mb-4 mt-2">
    <div class="col-md-12">
      <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
        <div class="row">
          <div class="col-md-12 mt-4">
            <div class="col-md-4 mt-4">
              <h4 class="mb-4 font-weight-bold">Step 1:</h4>
              <h5 class="mt-4 pl-5 pr-5">Search for people based on your keywords.</h5>
            </div>
            <div class="col-md-8 mt-4">
              <div class="icon-box">
                <img src="static/images/step1.jpg" class="img-fluid mx-auto d-block" />
              </div>
            </div>

            <div class="col-md-8 mt-4">
              <div class="icon-box">
                <img src="static/images/step2.jpg" class="img-fluid mx-auto d-block" />
              </div>
            </div>

            <div class="col-md-4 mt-4">
              <h4 class="mb-4 font-weight-bold">Step 2:</h4>
              <h5 class="mt-4 pl-5 pr-5">The results are sorted by a                                 
                person's responsiveness. Choose from a list of matches                               
                who are ready and willing to interact.</h5>
            </div>

            <div class="col-md-4 mt-4">
          <h4 class="mb-4 font-weight-bold">Step 3:</h4>
              <h5 class="mt-4 pl-5 pr-5">Message and make
                connections with people who are open for (real or
                virtual) coffee!</h5>
            </div>
            <div class="col-md-8 mt-4">
              <div class="icon-box">
                <img src="static/images/step3.jpg" class="img-fluid mx-auto d-block" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

但看起来是这样的：

​

​

所有的元素(文本然后图像，然后图像然后文本等等)互相堆叠在一起。我希望它是：

第1行：文本然后图像

第2行：图像然后文本

第3行：文本然后图像

任何关于我哪里出错的建议都会被感激地收到！

Answer 1

只需删除<div class="col-md-12 mt-4">...</div>

那么，守则将是：

<div class="container">
        <div class="row text-center mb-4 mt-2">
            <div class="col-md-12">
                <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
                    <div class="row">
                        <div class="col-md-4 mt-4">
                            <h4 class="mb-4 font-weight-bold">Step 1:</h4>
                            <h5 class="mt-4 pl-5 pr-5">Search for people based on your keywords.</h5>
                        </div>
                        <div class="col-md-8 mt-4">
                            <div class="icon-box">
                                <img src="https://static.toiimg.com/thumb/msid-58475411,width-748,height-499,resizemode=4,imgsize-142947/.jpg"
                                    class="img-fluid mx-auto d-block" />
                            </div>
                        </div>

                        <div class="col-md-8 mt-4">
                            <div class="icon-box">
                                <img src="https://static.toiimg.com/thumb/msid-58475411,width-748,height-499,resizemode=4,imgsize-142947/.jpg"
                                    class="img-fluid mx-auto d-block" />
                            </div>
                        </div>

                        <div class="col-md-4 mt-4">
                            <h4 class="mb-4 font-weight-bold">Step 2:</h4>
                            <h5 class="mt-4 pl-5 pr-5">The results are sorted by a
                                person's responsiveness. Choose from a list of matches
                                who are ready and willing to interact.</h5>
                        </div>

                        <div class="col-md-4 mt-4">
                            <h4 class="mb-4 font-weight-bold">Step 3:</h4>
                            <h5 class="mt-4 pl-5 pr-5">Message and make
                                connections with people who are open for (real or
                                virtual) coffee!</h5>
                        </div>
                        <div class="col-md-8 mt-4">
                            <div class="icon-box">
                                <img src="https://static.toiimg.com/thumb/msid-58475411,width-748,height-499,resizemode=4,imgsize-142947/.jpg"
                                    class="img-fluid mx-auto d-block" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>