Flex items won't wrap and shrink properly - html

Question

I want the flex item on the right to wrap under the image on smaller devices. I would also like both flex items to have the same height with each other when they shrink (along with the browser window).
.new-collection-wrapper {
background-color: #f1f1f1;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.new-collection-card {
width: 80%;
margin: 5em 0;
display: flex;
align-items: center;
}
.new-collection-card-img img {
height: 400px;
width: auto;
}
.new-collection-content {
height: 400px;
color: #f1f1f1;
background-color: #111111;
padding: 0 3em;
}
.new-collection-content h3 {
font-size: 2.5em;
font-weight: 300;
text-transform: uppercase;
line-height: 1.3;
margin-bottom: .2em;
}
.new-collection-content p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: .8em;
letter-spacing: 1px;
}
/* layout for medium screens */
#media screen and (min-width: 810px) {
.new-collection-content {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<main class="new-collection-wrapper">
<section class="new-collection-card">
<div class="new-collection-card-img">
<img src="http://www.petmania.ie/images/default-source/cat/petmania-kitten-1.jpg?sfvrsn=4" alt="new collection" alt="new collection">
</div>
<div class="new-collection-content">
<h3>AW19 collection</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, a sequi molestias nam odit sunt. Unde dolore fugit suscipit amet.</p>
<span>JOIN</span>
</div>
</section>
<!-- End of New Collection -->
</main>

Answer 1

Change the flex-direction for smaller screens (note that the media query has been changed to #media screen and (max-width: 810px)) on new-collection-card to column - see demo below:
.new-collection-wrapper {
background-color: #f1f1f1;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.new-collection-card {
width: 80%;
margin: 5em 0;
display: flex;
align-items: center;
}
.new-collection-card-img img {
height: 400px;
width: auto;
}
.new-collection-content {
height: 400px;
color: #f1f1f1;
background-color: #111111;
padding: 0 3em;
}
.new-collection-content h3 {
font-size: 2.5em;
font-weight: 300;
text-transform: uppercase;
line-height: 1.3;
margin-bottom: .2em;
}
.new-collection-content p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: .8em;
letter-spacing: 1px;
}
#media screen and (max-width: 810px) {
.new-collection-card { /* change the flex direction */
flex-direction: column;
}
}
<main class="new-collection-wrapper">
<section class="new-collection-card">
<div class="new-collection-card-img">
<img src="http://www.petmania.ie/images/default-source/cat/petmania-kitten-1.jpg?sfvrsn=4" alt="new collection" alt="new collection">
</div>
<div class="new-collection-content">
<h3>AW19 collection</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, a sequi molestias nam odit sunt. Unde dolore fugit suscipit amet.</p>
<span>JOIN</span>
</div>
</section>
<!-- End of New Collection -->
</main>