Javascript 根据情况在场地的顶部或底部有一个元素

在我的第一个响应式网站上工作时，我遇到了以下问题：

对于宽页，我希望所有div都有img。比如：

<img src="image.jpg"/>
<div> some content </div>
<div> some content </div>
...

一些内容
一些内容
...

但当我们缩小浏览器时，我希望在我所有的div下都有它：

...
<div> some content </div>
<div> some content </div>
<img src="image.jpg"/>

。。。
一些内容
一些内容

我找到的唯一解决办法就是

<img id="img_1" src="image.jpg"/>
<div> some content </div>
<div> some content </div>
<img id="img_2" src="image.jpg"/>

一些内容
一些内容

在媒体查询中，“打开”和“关闭”我现在需要或不需要的img。但在我看来，这并不是一个非常优雅的解决方案。。。我在考虑使用position:absolute，但它会为我产生更多的问题

非常感谢您的帮助！

---

Grzegorz

我想这样的东西对你会有用的：

<img src="image.jpg" id="yourImg"/>


function moveElement(Elm_Id, top, left) {
    $("#" + Elm_Id).css({ "position": "relative", "top": top, "left": left });
}

---

查看更多信息。

我认为您的sulotion是最好的。您可以使用display:flex，然后更改图像的顺序，但最终会得到多于两个img元素的代码。浏览器也会缓存图像，因此用户无需下载两次。

moveElement("yourImg", "200px", "300px");