¿Cómo hago que las columnas de la tarjeta se ordenen horizontalmente?

Tengo una lista de cartas con desplazamiento inteligente, y si bien me encanta el aspecto de card-columns de card-columns , es bastante frustrante que ordene de arriba abajo, así: 1 4 7 2 5 8 3 6 9

Este orden vertical parece básicamente inútil para cualquier cosa donde el contenido cargue más de unos pocos elementos. Si tengo 50 elementos, ¡algunos de los menos importantes estarán en la parte superior!

Intenté algunas variaciones usando flexbox, pero no conseguí que nada funcionara. ¿Alguien tiene órdenes horizontales trabajando?

Tal como se documenta , el orden de las columnas de CSS es de arriba a abajo, luego de izquierda a derecha, por lo que el orden de las columnas representadas será …

 1 3 5 2 4 6 

No hay forma de cambiar el orden de las columnas CSS. Se sugiere que use otra solución como Albañilería. https://github.com/twbs/bootstrap/issues/17882

Aquí se encuentra una solución sencilla y básica (no directamente para bootstrap) para establecer una mampostería vertical u horizontal con css http://w3bits.com/flexbox-masonry/

Daré una prueba y daré comentarios sobre cómo usarlo con bootstrap 4.

para uso horizontal :

 .masonry { display: flex; flex-flow: row wrap; margin-left: -8px; /* Adjustment for the gutter */ } .masonry-brick { flex: auto; height: 250px; min-width: 150px; margin: 0 8px 8px 0; /* Some gutter */ } .masonry-brick { &:nth-child(4n+1){ width: 250px; } &:nth-child(4n+2){ width: 325px; } &:nth-child(4n+3){ width: 180px; } &:nth-child(4n+4){ width: 380px; } } 

para uso vertical :

 .masonry { display: flex; flex-flow: column wrap; max-height: 800px; margin-left: -8px; /* Adjustment for the gutter */ } .masonry-brick { margin: 0 8px 8px 0; /* Some gutter */ } 

Lo único que funcionó para mí fue la integración de “albañil”