Para responder sua pergunta, é tudo o que você precisa: veja a demonstração responsiva completa com o css prefixado :
/* 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;
}
}
Para adicionar suporte ao conteúdo em miniatura, flexione-o em colunas flexíveis como a captura de tela acima, adicione-o também ... Observe que você também pode fazer isso com painéis:
.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%;
}
Embora o flexbox não funcione no IE9 e abaixo, você pode usar a demonstração com um fallback usando tags condicionais com algo como grades javascript como um polyfill:
<!--[if lte IE 9]>
<![endif]-->
Quanto aos outros dois exemplos da resposta aceita ... A demonstração da tabela é uma ideia decente, mas está sendo implementada incorretamente. A aplicação específica desse CSS nas classes de coluna de autoinicialização sem dúvida quebrará completamente a estrutura da grade. Você deve usar um seletor personalizado para um e dois estilos de tabelas não devem ser aplicados com [class*='col-']
larguras definidas. Este método deve ser usado SOMENTE se você quiser colunas de altura e largura iguais. Não se destina a outros layouts e NÃO é responsivo. No entanto, podemos torná-lo substituto em monitores móveis ...
<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%;
}
}
Por fim, a primeira demonstração da resposta aceita, que implementa uma versão do único layout verdadeiro, é uma boa opção para algumas situações, mas não é adequada para colunas de autoinicialização. A razão para isso é que todas as colunas se expandem para a altura do contêiner. Portanto, isso também interromperá a capacidade de resposta, pois as colunas não estão se expandindo para os elementos próximos a elas, mas para todo o contêiner. Esse método também não permitirá que você aplique margens inferiores às linhas por mais tempo e também causará outros problemas ao longo do caminho, como rolagem para tags de ancoragem.
Para obter o código completo, consulte o Codepen, que prefixa automaticamente o código do flexbox.