html - How do I make a flexbox switch to column mode when there isn't enough room for row mode? -

i have flexbox this:

when container narrow, wraps this:

but want this:

in other words, when flexbox wraps, want wrap everything @ once. it's either horizontal or vertical.

the flexbox elements aren't same size.

can done?

simplest way use media query.

set min-width parent element (or check before hand) , matching media query, change flex-direction column

@media screen , (max-width: 500px) {   .classname {     flex-direction: column;   } } 

---

side note

if want dig scripting this, eventlistener on resize , load, checking scrollbar this, , have way change style.

so not setting wrap row, @ point create scrollbar, either if page narrow on load or if user resize.

//horizontal scrollbar (function($) {     $.fn.hashorizontalscrollbar = function() {         return this.get(0) ? this.get(0).scrollwidth > this.innerwidth() : false;     } })(jquery);  //vertical scrollbar (function($) {     $.fn.hasverticalscrollbar = function() {         return this.get(0) ? this.get(0).scrollheight > this.innerheight() : false;     } })(jquery);   //use if($("#element").hasverticalscrollbar()){     //do whatever you'd } 

src: https://hasin.me/2013/08/17/detecting-if-a-dom-element-has-scrollbar/