Bootstrap 5 图像响应能力

Question

1

我正在使用 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 order-sm-1">
            <img src="./src/img/feature-section.jpeg" alt=" 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-2">
            <h2 class="display-6" id="about-heading">About Us</h2>
            <hr>
            <p class="lead mt-5">
              Ullamco nostrud ipsum laboris sint commodo. Do duis veniam culpa tempor veniam laboris dolor amet minim qui incididunt ipsum. Magna proident commodo ea do eiusmod amet cupidatat eu do commodo consectetur Lorem dolore exercitation. Tempor tempor id consectetur in exercitation enim reprehenderit amet elit ullamco veniam adipisicing officia eu. Cupidatat non velit in aliquip exercitation eiusmod occaecat aliqua ex.
            </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 order-sm-2">
            <h2 class="display-6" id="mission-heading">Our Mission</h2>
            <hr>
            <p class="lead mt-5">
              Ullamco nostrud ipsum laboris sint commodo. Do duis veniam culpa tempor veniam laboris dolor amet minim qui incididunt ipsum. Magna proident commodo ea do eiusmod amet cupidatat eu do commodo consectetur Lorem dolore exercitation. Tempor tempor id consectetur in exercitation enim reprehenderit amet elit ullamco veniam adipisicing officia eu. Cupidatat non velit in aliquip exercitation eiusmod occaecat aliqua ex.
            </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 order-sm-first">
            
            <img src="./src/img/team-section002.jpeg" alt=" logo" class="img-fluid mb-2 img-fluid rounded float-start" id="#team-img"/>
          </div>
        </div>
      </div>
    </section>
    <!-- MISSION SECTION CLOSE -->

Answer 1

我在本地的引导沙箱中查看了您的代码，它看起来不错。我无权访问你的CSS。如果您可以提供，我也许可以创建一个代码笔。

根据您的问题 - 图像按照您的要求重新定位。它们移动到文本上方（在容器/行内 - >您的列工作正常）。如果您没有看到这在您的端正常工作，请检查引导程序调用 - 它应该看起来像这样：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

请提供 CSS，或者，如果有帮助，请告诉我们 - 祝你好运。