Question

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

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

请查看下面的图片以获取更多详细信息

Answer 1

如果您使用的是Bootstarp 4，则可以使用订单类对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;
     }

Answer 2

我对引导程序不太熟悉，但是对于非引导程序的想法，我可以想到一个可以在此处使用的两个潜在解决方案。首先，您可以在标题下添加图片并将其隐藏在桌面屏幕上，然后通过媒体查询将null用于移动屏幕。

第二，我不确定是否可以使用jquery，但这是使用。display: block的潜在jquery解决方案。然后，一旦您检测到移动设备的尺寸，就可以将该图像放置在您想要的任何位置。像这样：

insertAfter()

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

Answer 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.如果是手机，则将图像移到标题旁边。

Answer 4

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

我认为获得结果的最佳方法是将Image放在2个位置上，然后根据屏幕宽度显示/隐藏其中1个。

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/

如何在手机上重新排序div类？

4 个答案:

HTML