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

Question

我正在使用骨架，这是我想要的响应式布局：

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

桌面布局 - 图像右侧的标题和说明

我应该如何构建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;
}

这似乎在很大程度上起作用，除非描述包裹在照片底部的照片下面，如果文字足够长，而不是仅保留在右栏。

如果我使用骨架或其中一个响应网格系统，我应该如何使用它们的列类？

Answer 1

您也可以在float: left样式表的.description段上设置desktop.css。这将使您的段落扩展到自己的“列”中。

然后，请记住还要对.container元素

应用清算