Html 试图将我的<；h1>；标题</h1>；超越我的形象

我想做点什么，但我不知道这是否可能

我有一个适用于台式机和平板电脑设备的html结构，它可以正常工作，但现在对于移动设备，我想稍微改变一下我的新闻结构

在移动版中，我想把我的

新闻标题

放在图片上方，但它会出现在图片下方，因为在我的html中，我首先有标题图片，但我不想更改我的html结构，仅使用CSS无法将标题放在图片上方

我正在尝试一些测试，但没有任何效果

我把我的例子放在这把小提琴上：

为了更好地理解，我用这些图片来展示我想要的：

---

尝试如下更改CSS：

#news
{
    height:140px; 
    margin-bottom:5px; 
    border-bottom:1px solid #f3f3f3;
    padding-bottom:43px;    
    position:relative;
    padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}

#news h2 {
    position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
    margin: 0px;
}

#news span 
{
    color:#7a7a7a;
    position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}

我想不出一个不使用绝对定位的好解决方案

不过我真的建议更改标记：p

---

CSS的答案都不太理想，因为CSS是用来改变风格而不是结构的。我建议使用jquery。在标题和图片的id上调用此命令以对其进行重新排序

$("#title").insertBefore("#pic");

如果您愿意，可以在屏幕太小时添加类似这样的内容（设置您想要的阈值）

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<400）{
$（“#标题”）.insertBefore（“#图片”）；
}
});

使用

位置：绝对，你可以把元素放在任何你想放的地方，但是它会有点不稳定。谢谢你，你的代码工作正常，但是有一些问题！因为我的段落和日期出现在标题和图片后面！是的，谢谢！它起作用了，我真的需要更好地理解相对和绝对的位置！但是你认为这样做正确吗？使用绝对定位是绝对正确的，尽管在使用时你应该小心。如果你用绝对定位来规划整个网站，你会因为用户客户端的屏幕和字体大小不同而遇到麻烦。但是，在特定的上下文（包含元素）中，通常可以使用绝对定位。容器必须相对放置，因此绝对位置（如顶部、左侧等）将与容器的边界相对应。谢谢，这似乎是一个很好的解决方案，但我正在测试if（$（window）.width（）也许更好的方法是在我的html中创建一个新的div，并在移动版本中显示该新div，在移动版本中隐藏用于桌面和平板电脑的div，不是吗？因为文章是一个具有相对定位的容器，绝对定位应该是可以的。更改标记会更好…使用JQuery处理这样的事情似乎很简单就像保留这种标记一样，这是一种很糟糕的做法……但是，如果以这种方式结束，请确保添加$（document）.ready（…）；以及：p$（window）.width为您提供智能手机的视口宽度，通常比实际设备宽度大得多。像素是角度测量值，但不想让您感到困惑，只需将以下内容添加到页面头部即可：
$( window ).resize(function() {
  if($(window).width() < 400){
     $("#title").insertBefore("#pic");
  }
});