在桌面视图屏幕中，使用 bootstrap 5 在移动视图顶部和底部的左右列答案

【问题标题】：In Desktop view screen will be left and right column in mobile view top & bottom using bootstrap 5在桌面视图屏幕中，使用 bootstrap 5 在移动视图顶部和底部的左右列
【发布时间】：2021-09-14 11:11:30
【问题描述】：

在桌面视图中屏幕将显示为左右列在移动视图中相同的屏幕将使用引导程序 5 显示为顶部和底部

例如在桌面视图中

甲乙

但在移动端查看

B
A

这是我的代码

        <div class="row">
        <div class="col-md-6">
            <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">
            <img class="auth" src="images/Two_factor_authentication.png">
        </div>
    </div>

图片在桌面上显示正确

在移动模式下

实际上图片应该在顶部，登录表单应该在下方

我尝试使用推拉，但它不起作用

这是我正在使用的bootstrap 5.0.2 版本

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

尝试使用订单类。

<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>

【讨论】：