Creación de un diseño en bootstrap - html, css, twitter-bootstrap

Estoy tratando de traducir un diseño de un diseñadoren html / css usando bootstrap pero estoy luchando para que funcione. Cada cuadro será una imagen diferente, pero por ahora solo he estado jugando con divs con bordes.

Cuando se encuentra en un dispositivo móvil, cada imagen debe estar en una sola columna, por lo que parece que deberían estar col-xs-12.

¿Alguna idea de cómo debería replicar esto usando bootstrap?

Respuestas

Lucharás para replicar este tipo dediseño mediante bootstrap: la cuadrícula bootstrap funciona según un principio basado en filas, lo que significa que las columnas se ajustan perfectamente en forma horizontal, pero no verticalmente: los elementos nuevos siempre eliminarán el elemento más grande que se encuentra arriba, lo que dejará espacios (he adjuntado un ejemplo de BS problema).

Estás mucho mejor usando algo como Albañilería o Flexionar Para lograr un diseño como este.

.one {
background: yellow;
}
.two {
background: red;
height: 100px;
}
.three {
background: blue;
height: 50px;
}
.four {
background: orange;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class "row">
<div class="col-sm-6 one">There is a gap under me above 768px width because div elements three and four will always clear the largest height of elements above.</div>
<div class="col-sm-6 two">two</div>
<div class="col-sm-6 three">three</div>
<div class="col-sm-6 four">four</div>
</div>
</div>

Agrega la clase col-xs-12 a todas las div que va a utilizar y agregar las clases col-md-x, x podría ser cualquier número del 1 al 12.

Para divs con 2 fichas en 1 columna, agregue 2 divs con el class col-md-6

La altura de los divs se ajustará manualmente.