Bootstrap5实现桌面端左右列移动端颠倒排列问题求助

解决方案 #

Bootstrap 5 已废弃旧版本的 push/pull 类，使用 flex 顺序控制类 order-* 即可实现响应式列顺序调整，操作步骤如下：

• 给登录表单所在的第一列添加类 order-2 order-md-1：含义是小于md断点（移动端）时顺序为2，md及以上断点（桌面端）时顺序为1
• 给图片所在的第二列添加类 order-1 order-md-2：含义是小于md断点时顺序为1，md及以上断点时顺序为2

修改后完整代码 #

<div class="row">
    <!-- 登录表单列 -->
    <div class="col-md-6 order-2 order-md-1">
        <div class="img-al">
            <img style="vertical-align: middle;" src="images/uiw_login.png">
            <h2 class="img_text">
               Client Login
            </h2>
        </div>
        <input type="text" class="form-control" placeholder="Client Code"><br/>
        <div style="display: inline-block;">
            <input style="margin-left:45px;" type="checkbox"> I'm not a robot
            <span><img src="images/Vector.png"></span>
        </div>
        <div>
            <button class="lgn_btn">
                Login
            </button><br/><br/>
            <p style="margin-left:40px;margin-top: 24px;">New here ? <a href="#" style="color: red;">Non - Client SignUp</a></p>
        </div>
    </div>
    <!-- 图片列 -->
    <div class="col-md-6 order-1 order-md-2">
        <img class="auth" src="images/Two_factor_authentication.png">
    </div>
</div>

效果验证 #

• 桌面端（屏幕宽度≥768px）：保持原有的「表单在前、图片在后」的左右两列布局
• 移动端（屏幕宽度<768px）：自动调整为「图片在上、表单在下」的垂直排列，符合预期要求

内容的提问来源于stack exchange，提问作者Mr.M