duplicate the Bootstrap flexbox grid system with media breakpoints - css

Question

I'm looking to duplicate the flexbox grid system from Bootstrap. Everything works great except the media query part.
The columns stack nicely horizontally, but when a specific media breakpoint gets activated I want to stack the div's on a new line.
I guess I can do it with jQuery, but I want to try to achieve it with pure css first. I tried to look at the source files for Bootstrap but couldn't make much sense of it.
.row {
overflow: hidden;
display: flex;
width: 100%;
background-color: burlywood;
height: auto;
}
.row > .col {
padding: 14px;
border: 2px solid black;
flex: 1 1 auto;
}
.col-md-4 {
padding: 14px;
border: 2px solid black;
flex: 1 1 33.33333%;
#media (max-width: 768px) {
.col-md-4 {
//code wanted
}
}
<div class="row">
<div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
<div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
<div class="col" style="background-color:crimson;">MyColumn 3</div>
<div class="col" style="background-color:crimson;">MyColumn 4</div>
</div>
the inline styling is only for testing purposes.

Answer 1

You had the media query declaration inside of another css rule.
A simple solution is to change the stacking direction of the .row itself.
Edit:
If you're just trying to learn, this is fine. However, if you want to use this in production I would recommend that you copy just the grid definitions out of bootstrap instead of reinventing the wheel.
That aside, know that bootstrap is mobile first. Your original example is not. What I added below is flex-wrap and wildcarded * the box-sizing property. That's most of the magic.
*{box-sizing: border-box;} /* borders will break your layout without this */
.row {
display: flex;
width: 100%;
background-color: burlywood;
height: auto;
flex-wrap: wrap; /*this is how columns 'wrap' on smaller devices */
}
.row>.col {
padding: 14px;
flex: 1 1 auto;
}
.col-md-4 {
padding: 14px 0;
border: 2px solid black;
width: 100%;
}
#media (min-width: 768px) {/*bootstrap uses media queries for larger screens, not smaller */
.col-md-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
<div class="row">
<div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
<div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
<div class="col-md-4" style="background-color:crimson;">MyColumn 3</div>
</div>