不能在不同的媒体大小上存储图像

Question

我试图在我的网站上创建一个重叠图像，每个图像上有不同的动画，768px和1028px工作正常，但在350px中，另一个图像2留在768px的位置，只是无法弄清楚为什么它没有不会在350px上移动

@media (min-width: 768px) and (max-width: 991px) {
@media (min-width: 1028px) and (max-width: 1440px) {
@media (min-width: 320px) and (max-width: 700px) {

提前致谢，

.image {
  -webkit-animation: spin 5 linear infinite;
  -moz-animation: spin 5s linear infinite;
  animation: spin 10s linear infinite;
  position: center center;
  z-index: 1;
  left: px:
}
.under {
  position: absolute;
  left: 0px;
  top: 10px;
  z-index: -1;
}
.over {
  left: 300px;
  top: 1px;
  z-index: -0;
}
@media (min-width: 768px) and (max-width: 991px) {
  #slide-4 .content-row {
    min-height: 6em;
  }
  .icon {
    margin-right: 1000px;
  }
  .over {
    min-height: 6em;
  }
  .under {
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: -1;
  }
  .over {
    left: 300px;
    top: 1px;
    z-index: -0;
  }
}
@media (min-width: 1028px) and (max-width: 1440px) {
  #slide-1 .home-row
}
min-height:6em;

}
.icon {
  margin-right: 1000px;
}
.under {
  position: absolute;
  left: 0px;
  top: 10px;
  z-index: -1;
}
.over {
  left: 300px;
  top: 1px;
  z-index: -0;
}
}
@media (min-width: 320px) and (max-width: 700px) {
  #slide-1 .home-row
}
min-height:6em;

}
.icon {
  margin-right:1000px;
}
.under {
  position:absolute;
  left:0px;
  top:10px;
  z-index:-1;
}
.over {
  left:300px;
  top:1px;
  z-index:-0;
}
}

<div class="slide story" id="slide-1">
  <div class="container-fluid">
    <div id="home-row-1">
      <div class="col-12">
        <img class="over" src="images/il1.png" width="300" height="300" />
        <img class="image" src="images/lr1.png" width="300" height="300" />
        <h4 class="animated bounce"><span class="font-thin">No.1 Natural Spring </h4> 
        <h2 class="animated bounceInDown"><span class="font-thin">Mineral water in Europe</h2>
        <h1 class="animated infinite flash"><span class=""font-semibold">Now in Asia.</h1>
        <br>
        <br>
      </div>
      <!-- /col-12 -->
    </div>
    <!-- /row -->

提前致谢