短篇故事

假设我的HTML已经完成了:

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

它看起来像这样:

------------
| Block A  |
------------
| Block B  |
------------
| Block C  |
------------

现在我想切换块的顺序.我怎么能只用CSS做到这一点？

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

我知道有一些hacky解决方案,比如使用position:absolute,但这并不能保持对该display:block属性的有效使用.也就是说,当块体尺寸增大时,块会向下推动其他块.

很长的故事

当用户使用计算机查看我的网页时,这些块按以下顺序显示:

1. 基本信息.
2. 活动安排.
3. iPhone应用广告

iPhone应用程序广告是最后放置的,因为它对计算机用户来说并不是非常重要.一小部分计算机用户将拨打电话并安装应用程序.

如果移动用户访问此站点,则iPhone应用程序广告应该是页面上最重要的事情.因此,它应该移到顶部:

1. iPhone应用广告
2. 基本信息.
3. 活动安排.

我希望iPhone和计算机用户共享相同的HTML,但有一个CSS媒体查询切换块的顺序.

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

我需要在div的右上角显示一个图像(图像是一个"对角线"功能区),但保持当前文本包含在内部div中,就像现在一样粘在它的顶部.

我尝试了不同的东西,包括在另一个div中的图像或定义它的类,如:

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

但没有任何运气.我得到的最好结果是所有文本都向下滚动了相同的图像高度.

任何的想法？