css - 响应式设计，如何更改 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 容器。在我想要的小屏幕上

分区 1

分区 2

在大屏幕上，我希望它们交换，

分区 2

分区 1

在我的 CSS 中，我现在得到了以下媒体查询：

 @media only screen and (min-width: 768px) {
 .main div.con1 {
    float: right;
    width: 57%;
}

.main div.con2 {
    float: right;
    width: 57%;
}

是否可以交换订单，如果可以，我该怎么做？有人可能有一个好的教程的链接吗？

非常感谢提前！

Answer 1

The method used in the StackOverflow question "CSS positioning div above another div when not in that order in the HTML" seems to be your best bet.

Answer 2

此代码段使用 flexbox 和相关属性来满足您的最终要求。还请注意，当您实现或使用autoprefixer或prefixfree 之类的东西时，您使用适当的供应商前缀作为flexbox 。

.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 -->

Answer 3

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

}