html – Just how to place 3 divs with taken care of very little size one per row, if internet browser home window size is much less than they require to be done in 1 row (with flex)?

I have a flex container with 3 divs, that have very little size (as an example, 253px in my situation). I intend to attain this practices:

1. if internet browser home window size is equivalent or greater than (253 * 3) pixels (plus some even more pixels, since internet browser likewise includes some margin on right as well as left, as an example, Mozilla Firefox includes 8 +8 px), than reveal these 3 divs in one row
2. if internet browser home window size is much less than (253 * 3) pixels (plus some even more), than area these divs one-under-another. So 3 divs – 3 rows.

Currently I have this component of code, with “flex-wrap: cover” residential property:

<< div design=" screen: flex; flex-direction: row; justify-content: flex-start; flex-wrap: cover;">>.
<< div design=" size:33%; min-width:253 px;">> EXAMINATION DIV PRIMARY<.
<< div design=" size:33%; min-width:253 px;">> EXAMINATION DIV SECOND<.
<< div design=" size:33%; min-width:253 px;">> EXAMINATION DIV NUMBER 3<.
<

However it is not specifically that i demand, since it can be a circumstance, when we have 2 rows (2 divs in very first row, one in 2nd row). I require or 1 row, or 3 rows.

I attempt to make this with flex technique, since somehow i can not utilize @media policy technique.

So what i can add/fix in my code?