響應式設計，如何更改div容器的訂單？

Question

我剛從響應式網頁設計開始。我有一個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%; 
} 

是否有可能交換訂單，如果有，我該怎麼做？任何人都有可能鏈接到一個很好的教程？

非常感謝！

Answer 1

在StackOverflow問題"CSS positioning div above another div when not in that order in the HTML"中使用的方法似乎是你最好的選擇。

Answer 2

與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")); 
    } 

}

Answer 3

該段使用Flexbox的和相關的屬性，以滿足您的最終requirement.Also請注意，您使用Flexbox將使用相應的供應商的前綴，當您執行或使用的東西如autoprefixer或prefixfree。

.main{ 
 
    display:flex; 
 
    flex-direction:column 
 
} 
 

 
.con1{ 
 
    order:2; 
 
    background-color: green; 
 
} 
 
.con2{ 
 
    order:1; 
 
    background-color: red; 
 
} 
 

 
/*For Large screen only*/ 
 
@media(min-width:1200px){ 
 
    .con1{ 
 
    order:1; 
 
    } 
 
    .con2{ 
 
    order: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 -->