Vertically Centered, 2-Col Responsive Content Overflowing - css

Question

I'm trying to set up 2-columns that are responsive (e.g., collapse with one on top of the other). The left column has text and the right has some buttons.
I want both to center align with each other vertically within the container. However, when I test for responsiveness, my buttons overflow out of the container instead of wrapping with the 2nd column:
.boxContent {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.boxCol {
flex: 0 0 50%;
box-sizing: border-box;
padding-right: 75px;
}
a.boxBtn {
display: block;
padding: 0.35em 1.2em;
border: 0.1em solid #1e1e1e;
margin: 0 0.3em 0.3em 0;
border-radius: 2%;
box-sizing: border-box;
text-decoration: none;
background-color: #fff;
text-align: left;
transition: all 0.2s;
}
.boxBtn:hover {
color: #000;
background-color: #e5bc73;
cursor: pointer;
}
#media all and (max-width: 30em) {
a.boxBtn {
margin: 0.4em auto;
}
}
#media screen and (max-width: 800px) {
.boxCol {
flex: 0 1 100%;
padding-right: 0;
padding-bottom: 75px;
}
}
<div class="Container">
<div class="boxContent">
<div class="boxCol">
<h1>Heading</h1>
</div>
<div class="boxCol">
<a class="boxBtn">
Button 1
</a>
<a class="boxBtn">
Button 2
</a>
<a class="boxBtn">
Button 3
</a>
</div>
</div>
</div>

Answer 1

from my comment :
you need either to reset flex-direction or allow wrapping on smaller screen. Your media queries do not reset any of them rules
If it is only to pile them without reordering purpose, display reset is good enough ,
possible example:
.boxContent {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.boxCol {
flex: 0 0 50%;
box-sizing: border-box;
padding-right: 75px;
}
a.boxBtn {
display: block;
padding: 0.35em 1.2em;
border: 0.1em solid #1e1e1e;
margin: 0 0.3em 0.3em 0;
border-radius: 2%;
box-sizing: border-box;
text-decoration: none;
background-color: #fff;
text-align: left;
transition: all 0.2s;
}
.boxBtn:hover {
color: #000;
background-color: #e5bc73;
cursor: pointer;
}
#media all and (max-width: 30em) {
a.boxBtn {
margin: 0.4em auto;
}
}
#media screen and (max-width: 800px) {
.boxContent {display:block;}
}
<div class="Container">
<div class="boxContent">
<div class="boxCol">
<h1>Heading</h1>
</div>
<div class="boxCol">
<a class="boxBtn">
Button 1
</a>
<a class="boxBtn">
Button 2
</a>
<a class="boxBtn">
Button 3
</a>
</div>
</div>
</div>
Tip: another approach would be to trigger the flex display at min-width:800px only, before no need for a 1 column layout.