JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<!-- Extra Example  -->
<div class="container">
  <div class="row">
  <div class="col-md-6 bg-primary one">.col 222</div>
    <div class="col-md-3 bg-danger two">.col 111</div>
    
    <div class="col-md-3 bg-success three">.col 33333</div>
</div>

Làm sao trên mobile Cái 2222 lên trước cái 111

CSS

@media (min-width: 768px){
.one {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
}
.three {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
}
}