Замена одного блока div на другой

Question

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

html:

<div class="div-wrap">
    <div class="div-wrap-txt">
        <div class="div-txt" id="one" style="padding-right: 35px;">
            <p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
        </div>
        <div class="div-txt" id="two" style="padding-right: 35px; margin-top: 50px;">
            <p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</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 style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
        </div>
        <div class="div-txt" id="four" style="text-align: left; padding-left: 25px; margin-top: 50px;">
            <p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
        </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 img {
  width: 36px;
  height: 36px;
}

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

.div-txt p.label {
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Cabin', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #1F2533;
}

.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;
  }
}