Испытание: палитра посложнее 20/32

Курсы §35. Флексбокс, часть 1
1

Прошел испытание, но чисто интуитивно. То есть что то я понимал зачем пишу, что то на удачу вставлял. Я запомнил свойства и их значения, как должны себя вести. Но все равно сложно понять поведение элементов.
Вот если удалить свойство wrap-reverse, то вообще дичь какая то получается.

> .palette {
>   display: flex;
>   flex-direction: row;
>   align-items: flex-end;
>   justify-content: center;
>   flex-wrap: wrap-reverse;
>   
> }
> 
> .color-1{
>   order: 7;
>   align-self: flex-start;
> }
> .color-7 {
>   order: 3;
> }  
> .color-2 { 
>   order: 1;   
> }
> 
> .color-3 {
>   order: 6; 
> }
> 
> .color-4 {
>   order: 2;   
> }
> 
> .color-5 {
>   order: 4;   
> }
> 
> .color-6 {
>   order: 2;   
> }
2

Сделала чуть иначе
.palette {
display: flex;
align-content: center;
flex-wrap: wrap-reverse;
justify-content: center;
}
.color-1{
order:7;
}
.color-7 {
order: 3;
}
.color-2 {
order: 1;
}
.color-3 {
order: 6;
}

.color-4 {
order: 2;
}

.color-5 {
order: 4;
}

.color-6 {
order: 2;
}

3

Необязательно прописывать order всем элементам, я вот так сделал:

Спойлеры! 
  .palette {
 display: flex;
 flex-wrap: wrap-reverse;
 align-content: center;
 justify-content: center
}

.color-1 {
 order: 10; 
}

.color-3 {
 order: 2; 
}

.color-5 {
 order: 1; 
}

Возможно можно еще меньше элементов двигать, но мне лень было разбираться в этой палитре.