"Change order of div Using CSS"
Bootstrap 4.1.1 Snippet by sunil8107

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change Order Divs</title> </head> <body> <div class="flex-div"> <div class="inner-div-1"> 1 </div> <div class="inner-div-2"> 2 </div> <div class="inner-div-3"> 3 </div> <div class="inner-div-4"> 4 </div> </div> <br> <br> <br> <p style="padding-top:40px" class="text-center top_spac"> Create by <a target="_blank" href="https://www.linkedin.com/in/sunil-rajput-nattho-singh/">Sunil Rajput</a></p> </body> </html>
.flex-div{ text-align:center; padding:20px; display:flex;flex-direction: row; justify-content:center;} .flex-div div{ width:100px; height:100px; line-height:100px; display:inline-block;color:#fff;} .inner-div-1{ background:red;order:4;} .inner-div-2{ background:#90d622;order:3;} .inner-div-3{ background:#12b6e5;order:1;} .inner-div-4{ background:#de12e5;order:2;}

Related: See More

Vue Material Kit PRO
Shopping Order Status
Change Password Form (With Validation)
Dynamic form fields - Add new field on focus or change

Questions / Comments: