I am hoping to get rid of media queries and just use flexbox to solve my problem, but I'm not sure if this is possible. As the window gets smaller, I want the columns to shrink until they hit their minimum width. Once they hit that, the middle column will jump down for the wrap.
I think my question boils down to this- can flexbox detect when it wraps? If so, can I prompt it to change the order of the items on wrap with strictly CSS?
Here is a codepen of what I"m trying to accomplish using media queries.
.wrapper { display: flex; justify-content: center; margin: 5px; flex-wrap: wrap;}.red { background-color: red; height: 240px; margin: 5px; width: 500px; order: 0;}.yellow { background-color: yellow; margin: 5px; height: 240px; min-width: 240px; max-width: 400px; flex: 1; order: 1;}.blue { background-color: blue; height: 240px; margin: 5px; min-width: 350px; max-width: 400px; flex: 1; order: 2;}@media (max-width:1130px) { .yellow { order: 4; }}<div class="wrapper"><div class="red"></div><div class="yellow"></div><div class="blue"></div></div>