Как сделать адаптивный коллаж при помощи flex?

Пытаюсь сделать адаптивный коллаж из фото в хэдэре при помощи flex. Но есть проблема, при нормальном расширении экрана всё хорошо, но как только меняю его, всё плывёт ползёт и скачет, что самое интересное, когда возвращаю нормальный размер экрана всё как было поползшее, так и осталось. А нужно что бы все эти картинки просто меняли свой размер, а не уходили друг под друга. У меня два ряда, в каждом по 6 картинок. Может посоветуете что-то?
UPD код

.flex-container {
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-content: stretch;
}

header.header {
    width: auto;
    height: 470px;
    display: block;
}
#photo_12 {
    background-image: url("../img/hot-dog.png");

    display: inline;
    background-size: cover;
    width: 175px;
    height: 235px;
    z-index: 89;
}
#photo_11 {
    background-image: url("../img/hot-dog2.png");

    display: inline;
    width: 236px;
    height: 236px;
    z-index: 88;
}
#photo_10 {
    background-image: url("../img/hot-dog3.png");
    display: inline;
    width: 236px;
    height: 235px;
    z-index: 87;
}
#photo_9 {
    background-image: url("../img/hot-dog7.png");
    width: 236px;
    height: 235px;
    z-index: 86;
}
#photo_8 {
    background-image: url("../img/hot-dog13.png");
    width: 236px;
    height: 235px;
    z-index: 85;
}
#photo_7 {
    background-image: url("../img/hot-dog2.png");
    width: 235px;
    height: 236px;
    z-index: 84;
}
#photo_6 {
    background-image: url("../img/hot-dog5.png");
    width: 176px;
    height: 234px;
    z-index: 83;
}
#photo_5 {
    background-image: url("../img/hot-dog10.png");
    width: 236px;
    height: 234px;
    z-index: 82;
}
#photo_4 {
    background-image: url("../img/hot-dog6.png");
    width: 236px;
    height: 234px;
    z-index: 81;
}
#photo_3 {
    background-image: url("../img/hot-dog8.png");
    width: 235px;
    height: 234px;
    z-index: 80;
}
#photo_2 {
    background-image: url("../img/hot-dog11.png");
    width: 236px;
    height: 234px;
    z-index: 79;
}
#photo_1 {
    background-image: url("../img/hot-dog10.png");
    width: 235px;
    height: 234px;
    z-index: 78;
}