html - 更改平板电脑和移动设备上的内容

Question

.img1{
    background-color:red;
    height:100px;
    width:100px;
    float:left;
}
.arrow{
    content:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSO3ZJVteOkqFdOVDcy8HlfYwW4LerPJ6HZpsq53KJ9obfRoJPgbg)
    height:100px;
    width:100px;
    float:right;
}
.img2{
    background-color:yellow;
    height:100px;
    width:100px;
    float:left;
}

<div class="container">
    <div class="img1"></div>
    <div class="arrow"></div>
    <div class="img2"></div>
</div>

我有一个简单的网站显示变化的插图。
例子
Image1→ Image2
Image3→Image4
在桌面 View 中它是正常的，但在 iphone View 中 →arrow 显示如下
图片 1
→
图片2
在这里，我希望该箭头显示为
图片 1
↓
图片2
我尝试将 @media-screen 与 content:url(aaa.com/aa.jpg)
一起使用 但是它没有出现。
注意:- 我正在使用“elementor pro”页面构建器来构建网站

Answer 1

我建议您采用 flexbox 方法，您可以简单地更改 flex-direction 并在媒体查询中旋转 arrow 图标

.container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.img1,
.img2,
.arrow {
  background-color: red;
  height: 100px;
  width: 100px;
}

.img2 {
  background-color: yellow;
}

.arrow {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSO3ZJVteOkqFdOVDcy8HlfYwW4LerPJ6HZpsq53KJ9obfRoJPgbg) no-repeat 0 50%/100%;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .arrow {
    transform: rotate(90deg);
  }
}

<div class="container">
  <div class="img1"></div>
  <div class="arrow"></div>
  <div class="img2"></div>
</div>