レスポンシブウェブデザインを始めたばかりです。2 列のレイアウト (サイドバーとコンテンツ) があります。
<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
コンテンツは 2 つの div コンテナーを取得しました。欲しい小さな画面で
Div1
Div2
大画面で入れ替わりたい、
Div2
Div1
私の CSS では、次のメディア クエリを取得しました。
@media only screen and (min-width: 768px) {
.main div.con1 {
float: right;
width: 57%;
}
.main div.con2 {
float: right;
width: 57%;
}
順序を入れ替えることはできますか?もしそうなら、どうすればいいですか? 誰もが良いチュートリアルへのリンクを持っていますか?
よろしくお願いします!