Испытание: палитра посложнее [20/31] - 100%

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

.palette {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
align-content: center;
justify-content: center;
}
div {
width: 25px;
}
.color-1 {
order: 7;
}
.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;
    flex-flow: column wrap-reverse;
    align-content: center;
    justify-content: center;
}

.color-1 {
    order: 1000;
}

.color-2 {
    order: 100;
}

.color-4 {
    order: 50
}

.color-6 {
    order: 40
}