Why does the grid reset on mobile devices?

Question

css

Hello, I'm making up a block with pictures and suddenly I ran into the problem of resetting the grid on the mobile. devices, everything looks something like this - https://image.prntscr.com/image/B2smnPAjRoCyZNyv98... and there are no more blocks, although there are .

<section id="works">
       <h1 class="works-title text-center">Наши Работы</h1>
       <div class="container-fluid">
           <div class="container">
               <div class="row wow zoomIn">
                   <div class="col-md-4 col-sm-12">
                       <div class="purplerp center-block">
                          <img class="purpleimg" src="img/purple.jpg" alt="">
                          <a href="#"><div class="opaci">
                              <h2>Purple RolePlay</h2>
                          </div></a>
                       </div>
                   </div>
                   <div class="col-md-4 col-sm-12">
                       <div class="frp center-block">
                           <img class="frpimg"  src="img/f-rp.jpg" alt="">
                           <a href=""><div class="opaci">
                              <h2>F RolePlay</h2>
                          </div></a>
                       </div>
                   </div>
                   <div class="col-md-4 col-sm-12">
                       <div class="keysnet center-block">
                           <img class="keysnetimg" src="img/keysnet.jpg" alt="">
                           <a href=""><div class="opaci">
                              <h2>Keys Net</h2>
                          </div></a>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </section>

.purpleimg{
    width: 360px;
    height: 225px;
    transition: all 0.2s linear;

}
.purplerp {
   width: 360px;
   height: 225px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   transition: all 0.4s ease-in-out;

 
}
.purplerp:hover .opaci{
    
    opacity: 1;
    transform: translateY(0px);
    transition: all 1s ease-in-out;
    
}
.purplerp:hover h2{
    opacity: 1;
    transition: all 1s ease-in-out;
}
.opaci{
    background: rgba(0,0,0,0.7) no-repeat;
    width: 360px;
    height: 225px;
    position: absolute;
    top: 1px;
    transform: translateY(300px);
    opacity: 0;
    transition: all 1s ease-in-out;
}
.opaci h2{
    color: #fff;
    padding-top: 65px;
    text-align: center;
    font-size: 2rem;
    font-family: 'Raleway' , sans-serif;
    opacity: 0;
    text-decoration: none;
}
.keysnet {
   width: 360px;
   height: 225px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   transition: all 0.4s ease-in-out;

 
}
.keysnetimg{
    width: 360px;
    height: 225px;
    transition: all 0.2s linear;
}
.keysnet:hover .opaci{
    
    opacity: 1;
    transform: translateY(0px);
    transition: all 1s ease-in-out;
    
}
.keysnet:hover h2{
    opacity: 1;
    transition: all 1s ease-in-out;
}
.frp {
   width: 360px;
   height: 225px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   transition: all 0.4s ease-in-out;

 
}
.frpimg{
    width: 360px;
    height: 225px;
    transition: all 0.2s linear;
}
.frp:hover .opaci{
    
    opacity: 1;
    transform: translateY(0px);
    transition: all 1s ease-in-out;
    
}
.frp:hover h2{
    opacity: 1;
    transition: all 1s ease-in-out;
}

Answer 1

Are you using a viewport?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">