I have this code:

```css
.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 200px;
  height: 200px;
}

.child,
.child:not(:nth-child(1)) {
  width: 100px;
  height: 100px;
}

.child:last-child:nth-child(1) {
  width: 200px;
  height: 200px;
}

.child:nth-child(1),
.child:last-child:nth-child(2) {
  width: 100px;
  height: 200px;
}

.child:nth-last-child(4) {
  width: 100px;
  height: 100px;
}
```

```html
Test with 1 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
</div>
Test with 2 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
</div>
Test with 3 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>
```

But I wish the last example had a different order, that is:

```
1 2
3 4

```

The important thing is that I cannot add different classes for each of the flex children.
The Twitter gallery behaves similarly, but it's more complicated there (it's flex in flex and probably some JS, although it probably works differently).
I need all the above-mentioned cases to work simultaneously.