JSFiddle - React, Tailwind, and code Playground

by iLight

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<span class="mobile">mobile</span>
<span class="desktop">desktop</span>

<div class="row">
  <div class="col col1">1</div>
  <div class="col col2">2 <br>test</div>
  <div class="col col3">3</div>
  <div class="col col4">4</div>
   <div class="col col5">5</div>
  <div class="col col6">6 </div>
  <div class="col col7">7</div>
  <div class="col col8">8<br>test</div>
</div>

CSS

.row{
  display: flex;
  flex-wrap: wrap;
  width:100%;
}
.col{
  background: #666;
  padding: 5px;
  margin: 10px;
  order: 20;
  width: 300px;
}
.col1{
  order:1;
}
.col2{
  order:3;
}
.col3{
  order:5;
}
.col4{
  order:7;
}
.col5{
  order:2;
}
.col6{
  order:4;
}
.col7{
  order:6;
}
.col8{
  order:8;
}
.mobile, .desktop{
  cursor: pointer;
}
.mob.row{
  width: 300px;
}
.mob .col{
  order:1;
}

JavaScript

$('.mobile').click(function(){
	$('.row').addClass('mob');
});
$('.desktop').click(function(){
	$('.row').removeClass('mob');
});