How to order divs in bootstrap 4? [duplicate] - html

Question

This question already has answers here:
Order columns through Bootstrap4
(6 answers)
Closed 3 years ago.
I have to divs next to each other in a row div. On mobile, i want the right_side div(col-md-9) to be the first div.
I tryed ordering it with flex, but it messed up all my site.
<div class="row">
<div class="col-md-3">Left side</div>
<div class="col-md-9">Right side, but first on mobile or tablet</div>
<div class="clearfix"></div>
</div>
If i am viewing the site on mobile or tablet, i want the col-md-9 div as first div.

Answer 1

#media screen and (max-width: 767px) {
.col-md-3 {
order: 2;
}
.col-md-9 {
order: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-3">Left side</div>
<div class="col-md-9">Right side, but first on mobile or tablet</div>
<div class="clearfix"></div>
</div>

Answer 2

there is an option to reverse the row using class. here is the code please try it once.
<div class="row flex-row-reverse">
<div class="col-md-9">Right side, but first on mobile or tablet</div>
<div class="col-md-3">Left side</div>
<div class="clearfix"></div>
</div>

Answer 3

Just use order property.
#media only screen and (max-width: 760px) {
.col-md-3 {
order:2;
}
}
#media only screen and (max-width: 760px) {
.col-md-3 {
order:2;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-3">Left side</div>
<div class="col-md-9">Right side, but first on mobile or tablet</div>
<div class="clearfix"></div>
</div>

Answer 4

Use Column Ordering to accomplish this.
col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.
I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...
See Code
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
view-port >= md
|A|B|
view-port < md
|B|
|A|

Answer 5

you can do with flex and order as below example.
If it is messing-up with all sites, then give your custom class and then give CSS.
#media screen and (max-width: 531px) {
.row { display: flex; flex-direction: column; }
.two { order: 1; }
.one { order: 2 }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3 one">Left side</div>
<div class="col-md-9 two">Right side, but first on mobile or tablet</div>
<div class="clearfix"></div>
</div>