Как расположить блоки в колонну при масштабировании?

Учусь верстать адаптивные сайты. На макете есть блок с 3 div по горизонтали. Как сделать так, чтобы при масштабировании они шли в ряд по вертикали. Эти карточки находиться внутри другого дива с параметрами display: flex; flex-direction: row. Про bootstrap слышал, но хочу без него.

<section class="second-side">
    <div class="second-container">
        <div class="second-side-text">
            <span class="second-span">ABOUT OUR DIGITAL AGENCY</span>
            <p class="second-p">Plantronics with its GN Netcom <strong>wireless headset</strong> creates the next generation of wireless headset and other products such as wireless amplifiers, and <strong>wireless</strong> headset telephone.</p>
        </div>
        <div class="second-side-cards">
            <div class="card1">
                <img class="card1-img" src="s1.jpg"></img>
                <div class="card1-text">
                <h5 class="card1-h5">ADDICTION WHIT GAMBLING</h5>
                <p class="card1-p">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This can be compared to an actual office’s files</p>
                </div>
            </div>

            <div class="card2">
                <img class="card2-img" src="s2.jpg"></img>
                <div class="card2-text">
                <h5 class="card2-h5">HEADSET NO LONGER WIRED</h5>
                <p class="card2-p">If you are in the market for a computer, there are a number of factors to consider. Will it be used for your home, your office or perhaps</p>
                </div>
            </div>

            <div class="card3">
                <img class="card2-img" src="s3.jpg"></img>
                <div class="card3-text">
                <h5 class="card3-h5">LIFE ADVICE LOOKING AT WINDOW</h5>
                <p class="card3-p">Having a baby can be a nerve wrackingexp erience for new parents – not the nine months of pregnancy, I’m talking</p>
                </div>
            </div>  
        </div>
    </div>
</section>

CSS

.second-side-cards { 
	height: 70%; 
	width: 100%; 
	display: flex; 
	flex-direction: row; 
	justify-content: space-around; 
	align-items: center; 
	background-color: green; 
	flex-wrap: wrap; 
} 
 
.card1 { 
	width: 30%; 
	height: 100%; 
	background-color: gray; 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-start; 
	align-items: center; 
} 
 
.card1-text { 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	width: 100%; 
	height: 60%; 
	background-color: white; 
	text-align: center; 
} 
 
.card1-h5 { 
	font-family: Poppins; 
	font-weight: 600; 
	font-size: 1em; 
} 
 
.card1-p { 
	font-family: Poppins; 
	font-weight: 200; 
	font-size: 1em; 
} 
 
.card1-img { 
	max-width: 100%; 
	height: auto; 
	min-width: 100%; 
 
} 
 
.card2-img { 
	max-width: 100%; 
	height: auto; 
	min-width: 100%; 
 
} 
 
.card3-img { 
	max-width: 100%; 
	height: auto; 
	min-width: 100%; 
 
} 
 
.card2 { 
	width: 30%; 
	height: 100%; 
	background-color: red; 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-start; 
	align-items: center; 
} 
 
.card2-text { 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	width: 100%; 
	height: 60%; 
	background-color: white; 
	text-align: center; 
} 
 
.card2-h5 { 
	font-family: Poppins; 
	font-weight: 600; 
	font-size: 1em; 
} 
 
.card2-p { 
	font-family: Poppins; 
	font-weight: 200; 
	font-size: 1em; 
} 
 
 
 
.card3 { 
	width: 30%; 
	height: 100%; 
	background-color: orange; 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-start; 
	align-items: center; 
} 
 
.card3-text { 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	width: 100%; 
	height: 60%; 
	background-color: white; 
	text-align: center; 
} 
 
.card3-h5 { 
	font-family: Poppins; 
	font-weight: 600; 
	font-size: 1em; 
} 
 
.card3-p { 
	font-family: Poppins; 
	font-weight: 200; 
	font-size: 1em; 
}