Responsive CSSの要素の順序と制御フローを変更する方法

Question

私はスケルトンを使っています、そしてここに私が欲しい反応的なレイアウトがあります：

モバイルレイアウト - タイトル、イメージ、説明ALL 1列スタック

デスクトップレイアウト - イメージの右側へのタイトルと説明

応答レイアウトがCSSとメディアクエリのみを使用して、あるいはその他のレイアウトが1つから他方に変更できるようにHTMLと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;
}

.

これを除いて、テキストが右の列を維持するのではなく、写真の下部にある写真の下にある写真の下に包まれていることを除いて、ほとんどの部分で機能しているようです。

スケルトンやレスポンライブグリッドシステムの1つを使用している場合は、列クラスを使用する必要がある場合はどうすればよいですか。

Answer 1

float: leftスタイルシートの.description段落でdesktop.cssを設定できます。これにより、段落を独自の「列」に拡大します。

それから、.container要素へのクリアを適用することを忘れないでください。