How to reorder div class on mobile? [duplicate] - css

Question

This question already has answers here:
Change div order with CSS depending on device-width
(1 answer)
How can I reorder my divs using only CSS?
(27 answers)
How to change order of divs on smaller screens?
(1 answer)
Closed 3 years ago.
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>
submit
</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

Answer 1

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

Answer 2

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/

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>
submit
</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.

Answer 4

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