Флексбокс. Мое решение испытания 20/31. Интересует мнение.

Для себя комментила, чтобы лучше понимать код.

.palette {
display: flex;
flex-direction: column-reverse; /снизу-вверх/
flex-wrap: wrap-reverse; /перенос последнего черного блока на новую строку, но в обратном направлении по поперечной оси, то есть не слева направо, а справа налево/
align-content: center; /по центру поперечной оси/
justify-content: center; /по центру главной оси/
}

.color-1 { /black/
order: 4;
}

.color-3 { /green/
order: 3;
}

.color-5 { /brown/
order: 2;
}

.color-7 { /purple/
order: 1;
}