How to make items stack on mobile view - html

Question

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>

Answer 1

There are 2 ways I can think of, towards solving this.
Method 1: Using Media query
.row {
display: flex;
flex-direction:column; /* Initially, mobile first */
}
/* If minimum screen width is 320, switch to side by side. Replace 320 with whatever screen size you want to swap between horizontal and stacked view */
#media (min-width:320px)
{
.row {
flex-direction:row;
}
}
.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>
Method 2: Using flex-wrap to automatically stack when 2 images don't fit side to side
.row {
display: flex;
flex-wrap:wrap;
}
.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>

Answer 2

Add a media query to address screens up to a certain width like:
#media only screen
and (max-width: 800px) {
selector {
property: value;
}
}
then change the flex-direction property from the default row to column:
flex-direction: column;
Reference to media queries: MDN Web Docs
.row {
display: flex;
}
#media only screen
and (max-width: 800px) {
.row {
flex-direction: column;
}
}
.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>