网站图像容器的响应能力

Question

我正在使用 Bootstrap 5 创建一个网站，在我的功能和任务部分中，我希望当视口为移动设备或平板电脑大小时图像移动到文本上方，但我不确定如何实现这一点。例如，在我网站的一个页面上，我这样做是为了实现上面提到的相同功能：

<div class="col-md col-12 order-1 order-md-0">
      <h3 class="display-3 text-start" pt-5>General Support</h3>
      <br>
      <!-- <br> -->
      <p class="text-start">
        Sit nisi ipsum sint incididunt qui amet cupidatat quis qui adipisicing excepteur ea consequat consequat. Anim qui non ex labore enim non Lorem. Sint sint consectetur magna quis proident anim. Ipsum dolor voluptate do veniam exercitation mollit quis adipisicing commodo labore voluptate cupidatat aliquip. Sint sit culpa nostrud laboris voluptate Lorem cupidatat.
        <br />
        <br />
        Proident deserunt nulla aliquip sint dolor. Labore qui quis cillum deserunt voluptate et nostrud et elit reprehenderit. Deserunt aliqua sint esse elit proident do excepteur proident anim. Adipisicing magna magna ullamco do ea in consectetur aliqua aliquip sint excepteur ex. Reprehenderit magna officia adipisicing exercitation qui sint amet fugiat et ipsum amet velit consectetur commodo. Eu duis laboris eiusmod ad quis ut voluptate. Nisi amet quis do laborum occaecat non mollit sunt.
        <br />
        <br />
        Culpa laborum occaecat exercitation deserunt nulla laboris est. Aliqua culpa et qui non mollit cupidatat excepteur. Labore ea ipsum sit est ipsum commodo velit adipisicing culpa aute et nostrud laboris. In ex velit proident veniam nostrud tempor duis ut sint.
      </p>
      <br />
      <div class="d-grid  col-6 mx-auto mb-4 text-start">
        <a href="./ticket-form">
          <button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;Ticket</button>
        </a>
          
        </div>
      </div>
  

但是，当我现在尝试做同样的事情时，我无法让它发挥作用。

这是我尝试将此功能添加到的代码的代码片段：

<!-- FEATURE SECTION START -->
    <section>
      <div class="container">
        <div class="row bg-white  mt-1 px-2">
          <div class="col-lg-6 col-sm-12">
            <img src="./src/img/feature-section.jpeg" alt="Technovine Solutions logo" class=" img-fluid rounded float-start mb-2 img-fluid mt-1" id="#team-img"/>
          </div>
          <div class="col-lg-6 col-sm-12">
            <h2 class="display-6" id="about-heading">About Us</h2>
            <hr>
            <p class="lead mt-5">
              Aliqua esse eiusmod culpa dolore ea Lorem do labore labore proident nisi. Do labore sunt veniam Lorem veniam dolor fugiat fugiat excepteur amet officia ipsum velit. Proident ullamco sint magna nisi in sunt veniam qui sit. Fugiat est ullamco sint commodo officia nostrud dolore. Dolor pariatur mollit mollit veniam occaecat magna pariatur et cillum culpa laboris. Magna qui est aute quis veniam exercitation elit cillum eiusmod.
            </p>
            <a href="./about#about" class="btn btn-primary mt-3" id="button">Read&nbsp;More</a>
          </div>
        </div>
      </div>
    </section>
    <!-- FEATURE SECTION CLOSE -->

    <!-- MISSION SECTION START -->
    <section>
      <div class="container">
        <div class="row bg-white pt-5 px-2">
          <div class="col-lg-6 col-sm-12">
            <h2 class="display-6" id="mission-heading">Our Mission</h2>
            <hr>
            <p class="lead mt-5">
              Occaecat dolore in non magna cupidatat. Aliquip exercitation elit nulla elit sint in elit magna elit culpa nisi commodo fugiat. Dolore laborum cupidatat aliquip velit aliqua officia ipsum eu adipisicing. Qui do ut consectetur magna. Nostrud non irure culpa quis.
            </p>
            <a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read&nbsp;More</a>
          </div>
          <div class="col-lg-6 col-sm-12">
            
            <img src="./src/img/team-section002.jpeg" alt="Technovine Solutions logo" class="img-fluid mb-2 img-fluid rounded float-start" id="#team-img"/>
          </div>
        </div>
      </div>
    </section>
    <!-- MISSION SECTION CLOSE -->

Answer 1

您可以使用 Bootstrap 排序类。如果您使用顺序类，您可以根据屏幕尺寸更改列的顺序。

代码中的示例：

<!-- FEATURE SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white mt-1 px-2">
      <div class="col-lg-6 col-sm-12 order-sm-2">
        <!-- Order changed to 2 for smaller viewports -->
        <img src="./src/img/feature-section.jpeg" alt="Technovine Solutions logo" class="img-fluid rounded float-start mb-2 img-fluid mt-1" id="#team-img"/>
      </div>
      <div class="col-lg-6 col-sm-12 order-sm-1">
        <!-- Order changed to 1 for smaller viewports -->
        <h2 class="display-6" id="about-heading">About Us</h2>
        <hr>
        <p class="lead mt-5">
          Aliqua esse eiusmod culpa dolore ea Lorem do labore labore proident nisi. Do labore sunt veniam Lorem veniam dolor fugiat fugiat excepteur amet officia ipsum velit. Proident ullamco sint magna nisi in sunt veniam qui sit. Fugiat est ullamco sint commodo officia nostrud dolore. Dolor pariatur mollit mollit veniam occaecat magna pariatur et cillum culpa laboris. Magna qui est aute quis veniam exercitation elit cillum eiusmod.
        </p>
        <a href="./about#about" class="btn btn-primary mt-3" id="button">Read More</a>
      </div>
    </div>
  </div>
</section>
<!-- FEATURE SECTION CLOSE -->

<!-- MISSION SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white pt-5 px-2">
      <div class="col-lg-6 col-sm-12 order-sm-1">
        <!-- Order changed to 1 for smaller viewports -->
        <h2 class="display-6" id="mission-heading">Our Mission</h2>
        <hr>
        <p class="lead mt-5">
          Occaecat dolore in non magna cupidatat. Aliquip exercitation elit nulla elit sint in elit magna elit culpa nisi commodo fugiat. Dolore laborum cupidatat aliquip velit aliqua officia ipsum eu adipisicing. Qui do ut consectetur magna. Nostrud non irure culpa quis.
        </p>
        <a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read More</a>
      </div>
      <div class="col-lg-6 col-sm-12 order-sm-2">
        <!-- Order changed to 2 for smaller viewports -->
        <img src="./src/img/team-section002.jpeg" alt="Technovine Solutions logo" class="img-fluid mb-2 img-fluid rounded float-start" id="#team-img"/>
      </div>
    </div>
  </div>
</section>
<!-- MISSION SECTION CLOSE -->

您可以在这里找到更多相关信息https://getbootstrap.com/docs/5.0/utilities/position/#order