I'm trying to replicate the flexbox grid system found in Bootstrap. Everything is working smoothly except for the media query aspect.
The columns are stacking horizontally as intended, but when a specific breakpoint is reached, I aim to have the divs stack on a new line.
I considered using jQuery, but I want to first attempt achieving this with pure css. I attempted to analyze the source files of Bootstrap, but found it difficult to grasp.
.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 {
//desired code here
}
}<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 just for testing purposes.