I have made 3 images side by side using display flex in desktop screen but now i want to make them responsive and make the items stack in mobile mode. Can someone tell me how to do it?
Code:
.row { display: flex;}.column { padding: 200px; text-align: center; flex: 10%;}.column img { border-radius: 50%; width: 300px; border: 2px solid white;}.column p { color: white; padding-top: 50px; font-size: 24px;}.partners-h1 p { font-family: "BatmanForeverAlternate"; font-size-adjust: 10px; color: white;}.partners-h1 { text-align: center; font-size: 30px;}/* added for demonstration purpose by editor */body { background-color: black;}<div class="row"><div class="column"><img src="images/sneak.jpg"><p>Sneak Energy</p></div><div class="column"><img src="images/kontrol.png"><p>Kontrol Freek</p></div><div class="column"><img src="images/astro.jpg"><p>Astro Gaming</p></div></div>