отзывчивая анимация на js

Question

Мне нужно закончить анимацию с помощью div блоков. Я хочу заменить блок div на другой через несколько секунд, но мне нужно сделать это только в мобильной версии.В компьютерной версии он работает так, как я хочу, но в мобильной версии он не работает, я имею в виду, что мой второй div блок не появляется после первого блока.В чем проблема?

CSS:

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root {
  --time: 24;
}

.div-txt {
  height: 180px;
  padding-top: 20px;
}

.div-wrap-txt {
    margin-bottom: 70px;
    width: 350px;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(1)  {
    animation-delay: 0s;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(2)  {
    animation-delay: calc(var(--time) / 4 * 1s);
}

.div-wrap-txt:nth-child(3) .div-txt:nth-child(1)  {
    animation-delay: calc(var(--time) / 2 * 1s);
}

.div-wrap-txt:nth-child(3) .div-txt:nth-child(2)  {
    animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-txt {
    animation-duration: calc(var(--time) * 1s);
    animation-iteration-count: infinite;
    animation-name: color-change;
    text-align: right; 
}      

@keyframes color-change {
    0%,
    25%,
    100% {
        background-color: #fff;
        box-shadow: 0 0 0 rgba(0,0,0,0.1);
    }

    1%,
    24% {
        box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
    }
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

@media screen and (max-width: 1170px) {
    #two {
        display: none;
    }
    #three {
        display: none;
    }
    #four {
        display: none;
    }
}   

HTML:

<div class="div-wrap">
<div class="div-wrap-txt">
<div class="div-txt" id="one" style="padding-right: 35px;">
  <p>turn<br> on it and connect application <br>with device.</p>
</div>
<div class="div-txt" id="two" style="padding-right: 35px; margin-top: 50px;">
  <p>After connection set up calibration to help device remember your upright and slouch positions.</p>
</div>
</div>
<div class="div-img">
</div>
<div class="div-wrap-txt">
<div class="div-txt" id="three" style="text-align: left; padding-left: 25px;">
  <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
</div>
<div class="div-txt" id="four" style="text-align: left; padding-left: 25px; margin-top: 50px;">
  <p>Statistics let track and analyze the <br>progress you’ve made from first <br>training to the last.</p>
</div>
</div>
</div> 

JS:

setInterval(function() {
    for( let i=0;i<4;i++) {
        if(i==0) {
          document.getElementById('#two')[i].style.opacity = 0;           
        } else {
          document.getElementById('#three')[i].style.opacity = 0;
          document.getElementById('#four')[i].style.opacity = 0; 
        } 
    }
},4000);

Возможно, у меня есть некоторые проблемы в моем коде js, можетВы помогаете мне в этом вопросе?