20/31 100%, проверьте, пожалуйста

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

.palette {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
align-items: flex-end;
justify-content: center;
}

.color-1 {
order: 7;
align-self: flex-start;
}

.color-2 {
order: 6;
}

.color-3 {
order: 1;
}

.color-4 {
order: 5;
}

.color-5 {
order: 2;
}

.color-6 {
order: 4;
}

.color-7 {
order: 3;
}

2
Можно сделать короче 
.palette {
    display: flex;  
    justify-content: center ;
    flex-direction: column-reverse;
    align-content: center;
    flex-wrap: wrap-reverse;
}    
.color-1 {
order: 3;
}

.color-3 {
order: 2;
}

.color-5 {
order: 1;
}