Flex et colonnage

Bonjour,
dans mon css j'ai :

.colcont {margin:0;
  display: flex; /*important*/
  flex-direction: row;
  flex-wrap: wrap;}
.col {
  background: pink;
  margin: 1em;
  flex: 1; /*important*/
}

dans mon html je met :

<div class="colcont">
<div class="col ">...</div>
<div class="col ">...</div>
<div class="col ">...</div>
</div>

Mes colonnes sont ok pas de soucis sur pc, par contre lorsque je suis sur smartphone j'aimerai n'avoir qu'un seule colonne par ligne et actuellement dans cette configuration j'ai deux colonnes l'une à coté de l'autre et la troisième seule en dessous. Comment faire pour imposer une seule colonne par ligne ?

Hello,

Si tu veux absolument le faire en Flexbox, tu as deux solutions :
1- les Media Queries : https://www.alsacreations.com/article/lire/930-css3-media-queries.html
2- l'astuce dite du "Holy Albatross" : https://codepen.io/raphaelgoetter/pen/KJveoX

Bon week-end

merci pour l'info.
j'ai essayé avec les media quieries mais sa ne fonctionne pas...
une idée du pourquoi ?
La partie de mon css est la suivante :

.colcont {margin:0;
  display: flex; /*important*/
  flex-direction: row;
  flex-wrap: wrap;}
.col {
  margin: 1em;
  flex: 1; /*important*/
  position:relative;
  padding-bottom:30px;
}

@media only screen and (max-width:500px){
.col {
    display:block;
    clear:both;
}
}
@media only screen and (max-width:700px){
.col {
    display:block;
    clear:both;
}
}
@media only screen and (max-width:800px){
.col {
    display:block;
    clear:both;
}
}

Bonjour,
Un exemple avec un break point à 500

https://codepen.io/Zonecss/pen/ZPLRQB