JSFiddle - React, Tailwind, and code Playground

HTML

<h1>flex-direction: row-reverse;</h1>
<section class="flex-container row-reverse">    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

<h1>More items</h1>
<section class="flex-container row-reverse">    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</section>

<h1>Preserving height/width of the child elements with 'flex-wrap'</h1>
<section class="flex-container row-reverse wrap">    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</section>

CSS

html, body{ color: white; font: 20px/1.1em Calibri; }
h1{ color: LightGray; line-height: 40px; }

/************************************************************/
.flex-container{
    display: flex; flex-direction: row-reverse;
    border: 2px solid SaddleBrown; 
}
.flex-container div{
    width: 100px; height: 100px; margin: 4px; background: chocolate;
}
.wrap{
    flex-wrap: wrap; 
}