JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container py-3">
  <div class="row">
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 active">
      1
    </div>
    <div class="col-12 more-info">
      <div class="alert alert-success">
        Hello...!
      </div>
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      2
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      3
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      4
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      5
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      6
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      7
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      8
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      9
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      10
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      11
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12">
      12
    </div>
  </div>

</div>

SCSS

.active {

  &.col-sm-6 + .more-info {
    order: 1;
    
  }
  
}