如何在移动设备上重新排序 div 类？ [复制]答案

【问题标题】：How to reorder div class on mobile? [duplicate]如何在移动设备上重新排序 div 类？ [复制]
【发布时间】：2019-03-01 06:23:30
【问题描述】：

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

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

详情请看下图

【问题讨论】：

哪个 Bootstrap 版本？
@Zim 似乎是 3 和 4 之间的混合...
您是否考虑过使用媒体查询？
我认为您当前的 html 布局不可能做到这一点，而且我认为您需要使用自己的样式而不是引导程序
bootstrap 3.3.7 如果它们是解决方案或自定义 css，我也可以使用 bootstrap 4

标签： css html twitter-bootstrap bootstrap-4

【解决方案1】：

如果您使用的是 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;
     }

【讨论】：

【解决方案2】：

我对引导程序不太熟悉，但对于非引导程序的想法，我可以想到两种可以在这里使用的潜在解决方案。首先，您可以在标题下添加图像并将其隐藏在桌面屏幕上，然后使用媒体查询将display: block 用于移动屏幕。

其次，我不确定您是否可以使用 jquery，但这里有一个使用 .insertAfter() 的潜在 jquery 解决方案。然后，一旦您检测到移动尺寸，您就可以将该图像放置在您想要的任何位置。像这样：

var isMobile = 768;

if ($(window).width() <= isMobile) {
    $('.duo').insertAfter('.pt-5'); 
}

你可以在这里测试：http://jsfiddle.net/3buty5oL/1/

【讨论】：

【解决方案3】：

$(function(){
if($(window).width() < 767){//first check the device width
$(".image img").insertAfter(".pt-5");//move the image after title
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 image">
            <img src="https://picsum.photos/200/300" alt="image" />
        </div>
    </div>
</div>

可以使用 juery 分两步完成 1.检查设备宽度。 2.如果是手机，则将图片移动到标题旁边。

【讨论】：

【解决方案4】：

通常您可以使用bootstrap4 订单类来记录屏幕上的元素。但是基于结构（即，在桌面上您有 2 列，但在移动设备上您有 1 个垂直列，其中 Image 位于 Title 和 Paragraph 之间），仅使用 order 类来实现所需的结果并不容易。

我认为实现结果的最佳方法是将图像放在 2 个位置并根据屏幕宽度显示/隐藏其中一个。

HTML

<div class="container">
     <div class="row">
         <div class="text-center col-md-6 text-md-left">
             <h4>Title</h4>
             <img class="img-fluid d-md-none" src="..." />
             <p>
                 Paragraph. Lorem ipsum dolor sit amet, consectetur 
                 adipiscing elit
             </p>
             <a href="#" class="btn btn-sm btn-warning">More</a>           
         </div>
         <div class="col-md-6">
             <img class="img-fluid d-none d-md-block" src="... />
         </div>
     </div>
</div>

在移动设备上，由于d-none，右侧栏的图片未显示：

在桌面上，由于d-md-block而显示右栏的图像，但由于d-md-none而未显示标题和段落之间的图像：

小提琴： http://jsfiddle.net/aq9Laaew/235510/

【讨论】：