试图将我的<h1>标题</h1>放在我的图像上方

Question

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

我有桌面和平板电脑设备的html结构，它的工作正常，但现在对于移动设备，我想改变一下我的新闻结构。

在移动版本中，我想将<h1>Title of the news</h1>放在图像上方，但它出现在图像下方，因为在我的html中我首先拥有标题图像，但我不想更改我的html结构，它不是有可能只用CSS将我的标题置于我的图像上方吗？

我正在尝试一些测试，但没有任何工作！

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

http://jsfiddle.net/Zkpj7/

为了更好地理解，我有这些图像来展示我想要的东西：

Answer 1

尝试更改这样的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

http://jsfiddle.net/Zkpj7/9/

Answer 2

CSS答案都不太理想，因为CSS用于改变样式而不是结构。我建议使用jquery。在标题和图片的ID上调用它来重新排序。

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

如果你愿意，可以在屏幕尺寸过小时添加这样的东西（设置你想要的任何阈值）。

$( window ).resize(function() {
  if($(window).width() < 400){
     $("#title").insertBefore("#pic");
  }
});