Das ist dann leider nicht mehr so einfach. Ich habe da mal eine Lösung gebaut mit allen Bildern in einem Container. Die Umschaltung zwischen einer, zwei und drei Spalten geschieht dabei, indem man die Breite der Bilder setzt auf 100%, 50% und 33.33%. Großer Nachteil: Man muss die Höhe des Containers anpassen, damit die Bilder annähernd gleich auf die Spalten verteilt sind. Dadurch ist das Layout schwer zu erweitern und es wäre am besten, wenn man die optimale Höhe mit Javascript berechnen würde.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galerie mit drei Spalen</title>
<style>
.col {
display: flex;
flex-direction: column;
}
.col img {
width: 100%;
height: auto;
}
@media (min-width: 600px) {
.col {
flex-wrap: wrap;
max-height: 1600px;
}
.col img {
width: 50%;
height: auto;
}
}
@media (min-width: 800px) {
.col {
max-height: 800px;
}
.col img {
width: 33.33%;
}
}
</style>
</head>
<body>
<div class="col">
<img src="images/dia0.jpg">
<img src="images/dia1.jpg">
<img src="images/dia2.jpg">
<img src="images/busleft.png">
<img src="images/dia3.jpg">
<img src="images/dia4.jpg">
<img src="images/01.png">
<img src="images/02.png">
<img src="images/03.png">
</div>
</body>
</html>
Das ist natürlich blöd. Ich hatte es auch getestet und zufällig ein Beispiel mit px gewählt, so dass mir dies nicht aufgefallen ist. Dann kommt dieser Weg für dich also nicht in Frage.