Tengo 3 divs que están dispuestos en fila usando bootstrap

 <div className="tile col-sm-4"> <img src='./cabnets.jpg' alt="wood" /> <div className="text"> <h1>Superior Cabniets</h1> <h2 className="animate-text">More lorem ipsum bacon ipsum.</h2> <p className="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p> </div> </div>

Los estoy diseñando con css para proporcionar un efecto de desplazamiento con el siguiente css

 .tile { height:30rem; background-color:#99aeff; display:inline-block; background-size:cover; position:relative; cursor:pointer; transition: all 0.4s ease-out; box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44); overflow:hidden; color:white; font-family:'Roboto'; } .tile img { height:100%; width:100%; position: absolute; /* not appearing on mobile */ top:0; left:0; transition: all 0.4s ease-out; } .tile .text { z-index:5; position:absolute; padding:30px; height:calc(100% - 60px); }

Espero que colapsen uno encima del otro para las pantallas móviles, sin embargo, en cambio, han desaparecido por completo. Revisé las herramientas de desarrollo y veo que en el móvil mis divs todavía están allí, pero su altura es 0.
No tengo puntos de interrupción CSS en mi código, ni ningún otro código que afecte a la clase .tile . Las pantallas de tamaño completo muestran perfectamente los 3 divs.