如何在响应式css中更改元素和控制流的顺序

Question

我正在使用skeleton，这里是我想要的响应式布局:

移动布局-标题，图像，描述全部在一列堆栈中

桌面布局-图像右侧的标题和描述

我应该如何结构html和css，以便响应式布局只能使用css和媒体查询从一个更改到另一个？我尝试在桌面布局中将图像浮动到左侧，并使标题成为移动布局中的块元素:

<div class="container">
<span class="date">10/1/2012</span>
<span class="title">title</span>
<img class="thumbnail" src="http://www.placehold.it/300x200">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat.
</p>
</div>​​​​​​​​​​​​​​

移动CSS

.title {
     display:block;
}

​.thumbnail {
}

.conatainer {
 width:320px;
}

桌面CSS

​.title {
     position:relative;
}

​.thumbnail {
    float:left;
}

.conatainer {
 width:960px;
}

这似乎在大多数情况下都起作用，除了描述包装在照片底部围绕它的照片下面，如果文本足够长，而不是仅仅保持在右列。

如果我使用skeleton或其中一个responive网格系统，我应该如何执行此操作，我应该使用他们的列类吗？

Answer 1

你可以设置 float: left 也在 .description 关于 desktop.css 样式表。这将使扩大你的段落在自己的"列"。

然后，请记住还应用清除到 .container 元素