如何更改元素div的位置？

Question

这是网站的图片和外观：

我想先放两张图片，然后在这两张图片下面放3张图片，但我不知道如何移动它们。

这是我试过的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-5"><img alt="Amey" height="756" src="/render/file.act?path=/cares-intern/_Files/images/staff%201%20circle.png" width="756" /><br />
<h3 class="name" style="text-align: center;">Sandra Najera | MBA Management</h3>
<p style="text-align: center;"><span class="Title">CARES Engagement Manager</span></p>
</div>
<div class="col-md-3 col-xs-5"><img alt="Ana V." height="756" src="/render/file.act?path=/cares-intern/_Files/images/blanca.png" width="756" /><br />
<h3 class="name" style="text-align: center;"> | MBA Finance</h3>
<p style="text-align: center;"><span class="Title">CARES Engagement Graduate Assistant</span></p>
</div>
<div class="col-md-3 col-xs-5"><img alt="Andres" height="756" src="/render/file.act?path=/cares-intern/_Files/images/Joshua.png" width="756" />
<h3 class="name" style="text-align: center;"> | Ed.D. Educational Leadership and Administration</h3>
<p style="text-align: center;"><span class="Title">CARES Engagement Manager</span></p>
</div>
<div class="col-md-3 col-xs-5"><img alt="Angie " height="756" src="/render/file.act?path=/cares-intern/_Files/images/Sandra.png" width="756" />
<h3 class="name" style="text-align: center;"> | MA Latin American and Border Studies</h3>
<p style="text-align: center;"><span class="Title">CARES Engagement Community Worke</span></p>
</div>
<div class="col-md-3 col-xs-5"><img alt="Angie " height="756" src="/render/file.act?path=/cares-intern/_Files/images/catherine.png" width="756" />
<h3 class="name" style="text-align: center;"> | CARES Undergraduate Assistant</h3>
</div>
</div>
</div>

我想先放两张图片，然后在这两张图片下面放3张图片，但我不知道如何移动它们。这是我想让它看起来有点像金字塔的代码，但我不知道怎么做！

Answer 1

这是您想要的代码！

<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-5"><img alt="Amey" height="756" src="/render/file.act?path=/cares-intern/_Files/images/staff%201%20circle.png" width="756" /><br />
      <h3 class="name" style="text-align: center;">Sandra Najera | MBA Management</h3>
      <p style="text-align: center;"><span class="Title">CARES Engagement Manager</span></p>
    </div>
    <div class="col-md-3 col-xs-5"><img alt="Ana V." height="756" src="/render/file.act?path=/cares-intern/_Files/images/blanca.png" width="756" /><br />
      <h3 class="name" style="text-align: center;">Blanca A. Hernandez | MBA Finance</h3>
      <p style="text-align: center;"><span class="Title">CARES Engagement Graduate Assistant</span></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-xs-5"><img alt="Andres" height="756" src="/render/file.act?path=/cares-intern/_Files/images/Joshua.png" width="756" />
      <h3 class="name" style="text-align: center;">Dr. Joshua Acevedo | Ed.D. Educational Leadership and Administration</h3>
      <p style="text-align: center;"><span class="Title">CARES Engagement Manager</span></p>
    </div>
    <div class="col-md-3 col-xs-5"><img alt="Angie " height="756" src="/render/file.act?path=/cares-intern/_Files/images/Sandra.png" width="756" />
      <h3 class="name" style="text-align: center;">Sandra I. Morales | MA Latin American and Border Studies</h3>
      <p style="text-align: center;"><span class="Title">CARES Engagement Community Worke</span></p>
    </div>
    <div class="col-md-3 col-xs-5"><img alt="Angie " height="756" src="/render/file.act?path=/cares-intern/_Files/images/catherine.png" width="756" />
      <h3 class="name" style="text-align: center;">Catherine Ross | CARES Undergraduate Assistant</h3>
    </div>
  </div>
</div>`

检查它here。