По умолчанию флекс-элементы располагаются в одну строку. Свойство flex-wrap со значением wrap-reverse позволяет переносить их на другую строку, если элементы не помещаются по ширине в контейнере. При этом последние элементы в коде HTML будут отображаться первыми.
div {
display: flex;
flex-wrap: wrap-reverse;
}
.photo {
border: 1px solid #d1d5d9;
margin-bottom: 1em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.photo {
margin-right: 1em;
}
.photo:last-child {
margin-right: 0;
}
figure {
margin: 0;
}
figcaption {
text-align: center;
padding: 0.5em;
}