JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ol class="row list-number-custom">
  <li class="col-sm-4 col-xs-6">list list list list list list list list list list list list list list list list list list</li>
  <li class="col-sm-4 col-xs-6">list</li>  
  <li class="col-sm-4 col-xs-6">list</li>
  
  <li class="col-sm-4 col-xs-6">list list list list list list list list list list list list list</li>
  <li class="col-sm-4 col-xs-6">list</li>  
  <li class="col-sm-4 col-xs-6">list</li>
  
  <li class="col-sm-4 col-xs-6">list</li>
  <li class="col-sm-4 col-xs-6">list</li>
  <li class="col-sm-4 col-xs-6">list</li>
</ol>

CSS

.list-number-custom {
  list-style: none;  
}
.list-number-custom > li {
  padding: 0 0 0 40px;
  position: relative;  
  margin: 15px 0;
}
.list-number-custom > li:before {  
  content: '';
  position: absolute;
  top: -5px;
  left: 0;  
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: tomato;
  color: #fff;
  border-radius: 50%;
}
.list-number-custom > li:nth-child(1):before{content:'1';}
.list-number-custom > li:nth-child(2):before{content:'4';}
.list-number-custom > li:nth-child(3):before{content:'7';}
.list-number-custom > li:nth-child(4):before{content:'2';}
.list-number-custom > li:nth-child(5):before{content:'5';}
.list-number-custom > li:nth-child(6):before{content:'8';}
.list-number-custom > li:nth-child(7):before{content:'3';}
.list-number-custom > li:nth-child(8):before{content:'6';}
.list-number-custom > li:nth-child(9):before{content:'9';}

.list-number-custom > li:nth-child(3n + 4){
    clear: both;
}

@media screen and (max-width: 767px) {		  
  .list-number-custom > li:nth-child(3n + 4){clear: none;}
	.list-number-custom > li:nth-child(2n + 3){clear: both;}	  
  .list-number-custom > li:nth-child(2):before{content:'6';}
  .list-number-custom > li:nth-child(3):before{content:'2';}
  .list-number-custom > li:nth-child(4):before{content:'7';}
  .list-number-custom > li:nth-child(5):before{content:'3';}
  .list-number-custom > li:nth-child(7):before{content:'4';}
  .list-number-custom > li:nth-child(8):before{content:'9';}
  .list-number-custom > li:nth-child(9):before{content:'5';}  
}

@media screen and (max-width: 479px) {		  
  .list-number-custom > li{
    clear: none;
    display: block;
    float: none;
    width: 100%;
   }	
  .list-number-custom > li:nth-child(2):before{content:'2';}
  .list-number-custom > li:nth-child(3):before{content:'3';}
  .list-number-custom > li:nth-child(4):before{content:'4';}
  .list-number-custom > li:nth-child(5):before{content:'5';}
  .list-number-custom >...