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和相关属性来满足您的最终要求。另请注意，在实施或使用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 -->

响应式设计，如何从div容器改变订单？

3 个答案: