100% 31/31 - оцените код, пожалуйста!

Курсы §35. Флексбокс, часть 1
1 
.palette-small {
  display: flex;
}

.palette-box:first-child .palette-small {
  flex-direction: column-reverse;
  justify-content: center;
}

.palette-box:first-child .color-3 {
  order: 3;
  align-self: center;
}

.palette-box:first-child .color-4 {
  align-self: center;
  order: -1;
}

.palette-box:nth-child(2) .palette-small {
  flex-direction: column-reverse;
  justify-content: space-between;
}

.palette-box:nth-child(2) .color-4,
.palette-box:nth-child(2) .color-1 {
  align-self: flex-start;
}

.palette-box:nth-child(2) .color-2,
.palette-box:nth-child(2) .color-6 {
  align-self: flex-end;
}

.palette-box:nth-child(3) .palette-small,
.palette-box:last-child .palette-small {
  justify-content: space-between;
}

.palette-box:nth-child(3) .part {
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

.palette-box:last-child .part {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

.palette-box:last-child .part:first-child {
  flex-direction: row;
}
2

Я сделал так, при желании по идее можно было посидеть и сгруппировать свойства и селекторы но мне лень ХД

Спойлеры 
.palette-small,
.part {
 display: flex;
 }

.exam .palette-box:nth-child(1) .palette-small {
 flex-direction: column;
 justify-content: center;
 }
 
 .exam .palette-box:nth-child(1) .color-3,
 .exam .palette-box:nth-child(1) .color-4 {
 flex-direction: column;
 align-self: center
 
 }
 
 .exam .palette-box:nth-child(1) .color-3 {
   order: -1;
 }
 
 .exam .palette-box:nth-child(1) .color-4,
 .exam .palette-box:nth-child(1) .color-2 {
   order: 1;
 }

.exam .palette-box:nth-child(2) .palette-small {
   flex-direction: column-reverse;
   justify-content: space-between;
}


.exam .palette-box:nth-child(2) div:nth-child(1),
.exam .palette-box:nth-child(2) div:nth-child(2){
   align-self: flex-end;
}

.exam .palette-box:nth-child(2) div:nth-child(3),
.exam .palette-box:nth-child(2) div:nth-child(4){
   align-self: flex-start;
}

.exam .palette-box:nth-child(3) .palette-small,
.exam .palette-box:nth-child(4) .palette-small{
  justify-content: space-between;
}

.exam .palette-box:nth-child(3) .part {
 flex-direction: column;
 justify-content: space-between;
}


.exam .palette-box:nth-child(4) .part:nth-child(2) {
  flex-direction: column-reverse;
  justify-content: space-between;
}