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
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example