如何使 Bootstrap 5 网格响应智能手机？

Question

我的作品集中有一个项目部分。我在左侧的描述/右侧的图像与左侧的图像/右侧的描述之间交替。我一直在煞费苦心地试图让它响应，但我想不出该怎么做才能解决这个问题。在智能手机上查看时，我希望每个项目的图像都位于顶部，文本位于下方。

这是项目部分的 HTML：

<section id="projects">
        <div class="container">
          <div class="row projects">
              <h1>My Projects</h1>
            <div class="col project-desc-left">
              <h2>Tindog</h2>
                <p>An landing page for the Tindog app. A twist on a typical dating app. Created with Bootstrap 5 and HTML/CSS utilizing Bootstrap grids.</p>
                <i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <i class="fab fa-bootstrap"></i><br>
                <a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/TinDog-WebDevBootcamp/" role="button" target="_blank">Live Site</a>
                <a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/TinDog-WebDevBootcamp" role="button" target="_blank">Github Repo</a>            </div>
            <div class="col col-lg-6 col-sm-12 project-img-right">
              <img class="project-img" src="assets/tindog.png"/>
            </div>
          </div>
          <div class="row projects">
            <div class="col">
              <img class="project-img" src="assets/nftcard.png"/>
            </div>
            <div class="col project-desc-right">
              <h2>NFT Preview Card</h2>
                <p>An preview card page created with HTML/CSS.</p>
                <i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <br>
                <a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/nft-preview-card-component-main/" role="button" target="_blank">Live Site</a>
          <a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/nft-preview-card-component-main" role="button" target="_blank">Github Repo</a>            </div>
          </div>
          <div class="row projects">
            <div class="col project-desc-left">
              <h2>3-Card Column</h2>
                <p>A preview card of vehicle options created with HTML/CSS.</p>
                <i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> </i><br>
                <a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/3-column-preview-card-component-main/" role="button" target="_blank">Live Site</a>
                <a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/3-column-preview-card-component-main" role="button" target="_blank">Github Repo</a>
            </div>
            <div class="col project-img-right">
              <img class="project-img" src="assets/3colcard.png"/>
            </div>
          </div>
        </div>
      </section>

我使用了 Bootstrap 5，并尝试使用 col-xs-12，但它看起来不正确，而且它还完全弄乱了桌面视图。笔记本电脑视图看起来正是我想要的样子，只是所有其他尺寸都完全错误。

这是 CSS：

/* Projects */
    
    #projects {
        width: 100%;
    }

    #projects h1 {
        text-align: center;
    }

    .projects {
        margin-left: 0;
        
    }

    .project-img{
        width: 300px;
    }
    
    .project-desc-left {
        margin: 5rem;
        width: 320px;
    }
    
    .project-desc-right {
        
    }
}

几天来我一直在尝试调整代码，但几乎没有任何进展。

This is the laptop view of the projects section

This is the mobile view of the projects section

Answer 1

您应该可以使用 Bootstrap 5 Column Ordering 来完成此操作，而无需添加任何额外的 CSS。您可以将这些类添加到您的Col 中，无论它们在您的 HTML 中的实际位置如何，它们都会按照给定的顺序出现在页面上。

一般用途。

.order-1
.order-2
.order-3
.order-4
.order-5

根据屏幕尺寸排序。在本例中，Column 将在 SM 屏幕上显示第 1 个，在 MD 屏幕上显示第 2 个，在 LG 屏幕上显示第 3 个。

.order-sm-1
.order-md-2
.order-lg-3 etc etc etc

您还可以将项目指定为unordered 或ordered-first 和ordered-last。这是这里所有内容的文档....

https://getbootstrap.com/docs/5.0/layout/columns/#order-classes