Anordnung von Bild1, Text, Bild2

Hallo, solange Bild1, Text und Bild2 in eine Zeile passen, sollen sie so nebeneinander erscheinen. Wenn das Dispay hierfür zu schmal ist, sollen Bild1, Text und Bild2 (horizontal zentriert) untereinander stehen. Wie kann ich dies erreichen?

Der hier verwendete Code

<style> main{ display:flex; } main>*{ width:300px; } @media (max-width:701px) { main{ display:flex; flex-direction:column; } main>*{ } } </style> <main> <img id="links" src="/image/kermit_.jpg"> <div><p>Hallo ich bin ein text</p></div> <img src="/image/kermit_.jpg" id="links"></main>