JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pc">
      <div class="backimageA"></div><div class="backimageB"></div><div class="backimageC"></div>
      <div class="backimageD"></div><div class="backimageE"></div><div class="backimageF"></div>
</div><!--/.pc-->
<div class="mobile">
      <div class="backimageA"></div><div class="backimageB"></div><div class="backimageC"></div>
      <div class="backimageD"></div><div class="backimageE"></div><div class="backimageF"></div>
</div><!--/.mobile-->

CSS

.pc,
.mobile {
	overflow: hidden;
}
.pc {
	width: 300px;
}
.mobile {
    display: flex;
    flex-wrap: wrap;
	width: 200px;
}
.pc>div,
.mobile>div{
	width: 100px;
	height: 100px;
	float: left;
}
.mobile > div:nth-child(1) {order: 1;}
.mobile > div:nth-child(2) {order: 2;}
.mobile > div:nth-child(3) {order: 4;}
.mobile > div:nth-child(4) {order: 3;}
.mobile > div:nth-child(5) {order: 5;}
.mobile > div:nth-child(6) {order: 6;}

.backimageA{background-image: url(http://placehold.jp/24/cc9999/993333/100x100.png?text=A)}
.backimageB{background-image: url(http://placehold.jp/24/9999cc/333399/100x100.png?text=B)}
.backimageC{background-image: url(http://placehold.jp/24/cc9999/993333/100x100.png?text=C)}
.backimageD{background-image: url(http://placehold.jp/24/9999cc/333399/100x100.png?text=D)}
.backimageE{background-image: url(http://placehold.jp/24/cc9999/993333/100x100.png?text=E)}
.backimageF{background-image: url(http://placehold.jp/24/9999cc/333399/100x100.png?text=F)}