0
(0)
If you want to change order on md
and larger sizes you can use order-md-
, this is provided by bootstrap. It looks like, if you want to change order only on md
size you will have to define normal order on one larger size. Use the below codes,
Find The Code Here
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h3 class="text-center mb-2">Reverse the order of columns in Bootstrap</h3>
<hr class="my-3">
<h5 class="text-center">For All</h5>
<div class="row mb-4">
<div class="col-6 order-2 text-center">order-2</div>
<div class="col-6 order-1 text-center">order-1</div>
</div>
<h5 class="text-center">For md size device</h5>
<div class="row">
<div class="col-md-6 order-md-1 text-center">order-md-1</div>
<div class="col-md-6 order-md-2 text-center">order-md-2</div>
</div>
</body>
</html>
Output
Reverse the order of columns in Bootstrap
For All
order-2
order-1
For md size device
order-md-1
order-md-2
How useful was this post?
Click on a star to rate it!
Average rating 0 / 5. Vote count: 0
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?
Total Views:
105
Share