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 order-1 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 order-2">
      2
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-3">
      3
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-4">
      4
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-5">
      5
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-6">
      6
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-7">
      7
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-8">
      8
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-9">
      9
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-10">
      10
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-11">
      11
    </div>
    <div class="col-1 col-lg-2 col-md-4 col-sm-6 col-12 order-12">
      12
    </div>
  </div>

</div>

<div class="scroll"></div>

SCSS

.active {
 
   &.col + .more-info {
     order: 2;
  }  
      
  @media (min-width: 576px) {
   
   &.col + .more-info {
      order: 4;
    }  
    
  }
  
  @media (min-width: 768px) {
   
   &.col + .more-info {
      order: 5;
    }  
    
  }

  @media (min-width: 992px)  {
   
   &.col + .more-info {
      order: 4;
    }  
    
  }

  @media (min-width: 1200px) {
    
  
    &.co + .more-info {
      order: 13;
    } 
    
  }  
  
}


.scroll {
  position: fixed;
  z-index: 10000;
  background: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  left: 0;
  bottom: 0;
  color: #000000;
  padding: 2px 4px;
  font-weight: bold;
}

&::before {
  position: fixed;
  z-index: 10000;
  background: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  right: 0;
  bottom: 0;
  color: #000000;
  padding: 2px 4px;
  font-weight: bold;
  content: 'XS';
  text-transform: lowercase;

  @include media-breakpoint-up(sm) {
    content: 'SM';
  }

  @include media-breakpoint-up(md) {
    content: 'MD';
  }

  @include media-breakpoint-up(lg) {
    content: 'LG';
  }

  @include media-breakpoint-up(xl) {
    content: 'XL';
  }
}