Pour répondre à votre question est vous avez tous besoin voir la démo complète avec réponse css préfixé :
/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/
@media only screen and (min-width : 481px) {
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
Pour ajouter la prise en charge du contenu des vignettes flex dans les colonnes flex comme la capture d'écran ci-dessus, ajoutez également ceci ... Notez que vous pouvez également le faire avec les panneaux:
.flex-row .thumbnail,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.flex-text {
flex-grow: 1;
}
.flex-row img {
width: 100%;
}
Bien que flexbox ne fonctionne pas dans IE9 et ci-dessous, vous pouvez utiliser la démo avec un repli en utilisant des balises conditionnelles avec quelque chose comme des grilles javascript comme polyfill:
<!--[if lte IE 9]>
<![endif]-->
Quant aux deux autres exemples de la réponse acceptée ... La démonstration de la table est une idée décente mais est mal mise en œuvre. L'application de ce CSS sur les classes de colonnes bootstrap en particulier rompra sans aucun doute le cadre de la grille. Vous devez utiliser un sélecteur personnalisé pour un et deux styles de tableaux ne doivent pas être appliqués à [class*='col-']
des largeurs définies. Cette méthode doit être utilisée UNIQUEMENT si vous voulez des colonnes de hauteur ET de largeur égales. Il n'est pas destiné à d'autres mises en page et n'est PAS réactif. On peut cependant y revenir sur les écrans mobiles ...
<div class="table-row-equal">
<div class="thumbnail">
Content...
</div>
<div class="thumbnail">
Content...
</div>
</div>
@media only screen and (min-width : 480px){
.table-row-equal {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 30px 0px;
word-wrap: break-word;
}
.table-row-equal .thumbnail {
float: none;
display: table-cell;
vertical-align: top;
width: 1%;
}
}
Enfin, la première démo de la réponse acceptée qui implémente une version de la seule mise en page vraie est un bon choix pour certaines situations, mais ne convient pas aux colonnes d'amorçage. La raison en est que toutes les colonnes se développent à la hauteur du conteneur. Ainsi, cela interrompra également la réactivité, car les colonnes ne s'étendent pas aux éléments à côté d'eux, mais à l'ensemble du conteneur. Cette méthode ne vous permettra pas non plus d'appliquer des marges inférieures aux lignes et entraînera également d'autres problèmes en cours de route, comme le défilement des balises d'ancrage.
Pour le code complet, voir le Codepen qui préfixe automatiquement le code flexbox.