时间戳

首页 > 解决方案 > 如何在移动设备上重新排序 div 类？

css - 如何在移动设备上重新排序 div 类？

问题描述

如何在手机上重新排序课程？我想先放标题，然后是图像，然后是段落和按钮。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3 class="pt-5">Title</h3>          
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </p>
            <a href="#" class="btn btn-warning">submit</a>
        </div>
        <div class="col-md-6 col-xs-12 align-self-center">
            <img src="img/duo.png" alt="image" />
        </div>
    </div>
</div>

请查看下面的图片了解更多详情

标签： csshtmltwitter-bootstrapbootstrap-4

解决方案

如果您使用的是 Bootstarp 4，那么您可以使用 order 类重新排序您的 div

例如：

<div class="order-sm-2 order-1"></div>
<div class="order-sm-1 order-2"></div>

你也可以通过 CSS 来做。确保您使用的是 FLEX 属性

    .your_class{
         order: 2;
     }

    .your_class1{
        order: 1;
     }

推荐阅读