JSFiddle - React, Tailwind, and code Playground

by Angelos Chaidas

HTML

<p>left-to-right</p>
<div class="flex flex-ltr">
  <div class="col col-one">1</div>
  <div class="col col-two">2</div>
  <div class="col col-three">3</div>
</div>

<p>right-to-left</p>
<div class="rtl">
  <div class="flex">
    <div class="col col-one">1</div>
    <div class="col col-two">2</div>
    <div class="col col-three">3</div>
  </div>
</div>

<p>right-to-left &amp; vertical-lr</p>
<div class="rtl vertical-lr">
  <div class="flex">
    <div class="col col-one">1</div>
    <div class="col col-two">2</div>
    <div class="col col-three">3</div>
  </div>
</div>

CSS

/* Flex grid */
.flex {
  display: flex;
  margin: 0 0 30px;
}

.rtl {
	direction: rtl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.col {
  width: 80px;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}
.col-one {
	order:2;
}
.col-two {
	order:1;
}
.col-three {
	order:3;
}