Здравствуйте,верстаю блок с картинками и вдруг столкнлся с проблемой сброса сетки на моб . устройствах все выглядит примерно так-
https://image.prntscr.com/image/B2smnPAjRoCyZNyv98... и больше нет блоков , хотя в десктопной версии есть .
<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;
}
