Html 将一块替换为另一块

这是一个响应版本，但我只需要在几秒钟后将文本块更改为另一个

我有4个div文本块。我需要在响应版本中看到一个块，它将在几秒钟后被另一个文本块替换。你知道我怎么做吗？请帮忙

这是我的HTML：

  <div class="div-wrap">
      <div class="div-wrap-txt">
        <div class="div-txt" style="padding-right: 35px;">
          <p class="label">Connt</p>
          <p style="color: #6B7684;">shoulders, turn<br> on it and connect application <br>with device.</p>
        </div>
        <div class="div-txt" style="padding-right: 35px; margin-top: 50px;">
          <p class="label">Calib</p>
          <p style="color: #6B7684;">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" style="text-align: left; padding-left: 25px;">
          <p class="label">Train</p>
          <p style="color: #6B7684;">posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
        </div>
        <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;">
          <p class="label">Anale</p>
          <p style="color: #6B7684;">Statistics let track the <br>progress you’ve made from first <br>training to the last.</p>
        </div>
      </div>
     </div>

我读到我可以使用JavaScript和JQuery代码，但我不知道如何使用

---

如果我理解正确，您想隐藏一个块，然后显示另一个块吗？这取决于屏幕的大小

在要在移动设备上显示的项目上添加类。在要在桌面上显示的项目上添加其他类

在移动设备上，在桌面类上添加display:none。从桌面（fe:1170px）设置显示：移动类上无。并在桌面类上添加display:block（或flex，或…）

.div img img{
位置：绝对位置；
排名：0；
左：50%；
显示：块；
转化：translateX（-50%）；
不透明度：0；
动画持续时间：计算（var（--时间）*1s）；
动画迭代次数：无限；
动画名称：淡入淡出；
}
.div img img：第n个孩子（1）{
动画延迟：0s；
}
.div img img：第n个孩子（2）{
动画延迟：计算（var（--时间）/8*1s）；
}
.div img img：第n个孩子（3）{
动画延迟：计算（var（--时间）/4*1s）；
}
.div img img：第n个孩子（4）{
动画延迟：计算（var（--时间）/2.66*1s）；
}
.div img img：第n个孩子（5）{
动画延迟：计算（var（--时间）/2*1s）；
}
.div img img：第n个孩子（6）{
动画延迟：计算（var（--时间）/1.6*1s）；
}
.div img img：第n个孩子（7）{
动画延迟：计算（var（--时间）/1.33*1s）；
}
.div img img：第n个孩子（8）{
动画延迟：计算（var（--时间）/1.14*1s）；
}
.div txt{
动画持续时间：计算（var（--时间）*1s）；
动画迭代次数：无限；
动画名称：颜色变化；
文本对齐：右对齐；
}
@关键帧颜色更改{
0%,
25%,
100% {
背景色：#fff；
长方体阴影：0 rgba（0,0,0,0.1）；
}
1%,
24% {
盒影：0 10px 90px rgba（0,0,0,0.4）；
}
}
@关键帧淡入淡出{
0%,
20%,
100% {
不透明度：0；
z指数：自动；
}
1%,
99% {
z指数：1；
}
8%,
12% {
不透明度：1；
}
}
@介质和全部（最小宽度：1170px）{
.div包装{
flex-flow：行nowrap；
证明内容：周围的空间；
}
}
.块桌面{
显示：无；
}
@介质和全部（最小宽度：1170px）{
.移动闭塞{
显示：无；
}
.块桌面{
显示：块；
}
}

连接

肩膀，打开它并将应用程序与设备连接

校准

校准以帮助设备记住您的直立和懒散姿势

列车
无论何时，只要你愿意，都可以设定每日目标，逐步改善你的姿势

分析

通过统计，您可以跟踪从第一次培训到最后一次培训的进度

@Simsteve7是的，我只需要查看响应中的替换块version@Simsteve7我看到了，但是html中有块计算机类。我需要在哪里添加它的html？是的，但我需要另一件事。我可以把屏幕发送到你的gmail吗？我需要看一个街区。只需一秒钟，几秒钟后它就会变成另一个，具体取决于屏幕。我添加了图片和描述。请看这个让我们看看。

  .div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

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

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

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

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

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

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 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);
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}

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