flex-flow:row-reverse wrap-reverse in reverse order html and css

Question

I have a content and I Want them in row-reverse and wrap-reverse but with reverse order. Here's code:

.a {
  height: 200px;
  width: 520px;
  padding: 5px 5px 5px 10px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: black;
}

.b {
  min-width: 120px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-right: 5px;
  background-color: aquamarine;
}

<div class="a">
  <div class="b">1</div>
  <div class="b">2</div>
  <div class="b">3</div>
  <div class="b">4</div>
  <div class="b">5</div>
  <div class="b">6</div>
</div>

The order should be reversed. Please answer this without using 'order' property. Something like this image(sorry for bad edit):

Please see code output first then image.

Answer 1

We can make use of Quantity Queries to implement this layout (no js required!)

Demo Snippet:

ul {
  list-style: none;
  min-height: 90px;
  width: 500px;
  padding: 5px;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
}
li {
  display: inline-block;
  min-width: 120px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: aquamarine;
}
li:nth-last-child(4n + 3):first-child {
  margin-left: 125px;
  background-color: pink;
}
li:nth-last-child(4n + 2):first-child {
  margin-left: 250px;
  background-color: blue;
}
li:nth-last-child(4n + 1):first-child {
  margin-left: 375px;
  background-color: green;
}
li:nth-last-child(4n):first-child {
  background-color: purple;
}

<ul>
  <li>1</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Explanation:

The layout required here essentially boils down to a regular four-column left to right layout with the first element indented according to how many items there are in the container.

When there are 4n items (4, 8, 12 etc) - no indentation is required.

When there are 4n + 1 items (1, 5, 9 etc) - a three-item indentation is required.

When there are 4n + 2 items (2, 6, 10 etc) - a two-item indentation is required.

When there are 4n + 3 items (3, 7, 11 etc) - a one-item indentation is required.

Relevant CSS:

li:nth-last-child(4n + 3):first-child {
  margin-left: 125px; /* one-item indentation */
}
li:nth-last-child(4n + 2):first-child {
  margin-left: 250px; /* two-item indentation */
}
li:nth-last-child(4n + 1):first-child {
  margin-left: 375px; /* three-item indentation */
}
li:nth-last-child(4n):first-child {
  /* no indentation */
}

To understand this, let's use the OP's example:

Say there are 6 items. We need to apply a two-item indentation to the first item.

The selector for this would be:

li:nth-last-child(4n + 2):first-child {
  margin-left: 250px; /* 250 = 2 * 120 (item width) + 2 * 5px gap */
}

The interesting bit is :nth-last-child(4n + 2):first-child which means:

'select the first child if it is also the 4n + 2 child from the last child.'

Codepen demo