How to reorder div class on mobile?

Question

How can i reorder class on mobile? i want to put the title first, then the image, then paragraph and the button.

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

Please check the image below for more details

I don't think that is possible with your current html layout and also I think you would need to use your own styles rather than bootstraps — Pete, Sep 25 '18 at 15:09
bootstrap 3.3.7 i can use bootstrap 4 too if their is a solution or custom css — Ashek Mahmud, Sep 25 '18 at 15:10
Not a html or css fix, but a quick way would be to use some jquery, if you can. I've had to do stuff like this before and used `.insertAfter()`. http://api.jquery.com/insertafter/ — justDan, Sep 25 '18 at 15:12

score 0 · Answer 1 · answered Sep 25 '18 at 15:19

If you are using Bootstarp 4 then you can use order class to reorder your div

for eg:

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

You can do by CSS also. Make sure you are using FLEX properties

    .your_class{
         order: 2;
     }

    .your_class1{
        order: 1;
     }

score 0 · Answer 2 · answered Sep 25 '18 at 15:26

I'm not too familiar with bootstrap, but for non bootstrap ideas, I could think of two potential solutions one could use here. First you could add the image under the title and hide it on desktop screens and then use display: block for mobile screens using media queries.

Second, I'm not sure if you can use jquery or not, but here is a potential jquery solution using .insertAfter(). Then once you detect a mobile size, you can place that image wherever you would like. Like such:

var isMobile = 768;

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

You can test that here: http://jsfiddle.net/3buty5oL/1/

score 0 · Answer 3 · answered Sep 25 '18 at 15:27

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

it can be done using juery in two steps 1. check for device width. 2. if its mobile then move the image next to title.

score 0 · Answer 4 · answered Sep 25 '18 at 19:11

Normally you can use bootstrap4 order classes to recorder the elements on the screen. But based on the structure (i.e., on Desktop you kind of have 2 columns but on Mobile you have 1 vertical column where Image sits in between Title and Paragraph), it is not so easy to just use order classes to achieve the desired result.

I think the best way to achieve the result is to put the Image on 2 places and show/hide one of them based on the screen width.

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>

On mobile, the image on the right column is not showing due to d-none:

On desktop, the image on the right column is showing due to d-md-block, but the image between the Title and Paragraph is not showing due to d-md-none:

fiddle: http://jsfiddle.net/aq9Laaew/235510/

How to reorder div class on mobile?

4 Answers4

HTML