4

レスポンシブウェブデザインを始めたばかりです。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%;
}

順序を入れ替えることはできますか?もしそうなら、どうすればいいですか? 誰もが良いチュートリアルへのリンクを持っていますか?

よろしくお願いします！

4

3 に答える 3

4

StackOverflow の質問「CSS で div を別の div の上に配置するが、HTML でその順序になっていない場合」で使用されている方法が最善の策のようです。

于 2012-10-11T20:21:45.470 に答える
1

jsを使用：

//on load
responsive_change_box_order();
//on resize
 window.addEventListener('resize', responsive_change_box_order );

function responsive_change_box_order() {
   if (window.matchMedia("(max-width: 1118px)").matches) {
       jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
   }
   else{
       jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
   }

}

于 2015-07-24T11:05:39.263 に答える