Question

这就是我想要做的事情：

我将棕色部分分别在顶部作为div。然后是content div中的其他颜色。

我不明白如何将蓝色部分放在顶部以便＆lt; 768px，因为它在content div内。

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
      flex-direction: column;
    }
    .aquablue{
      padding: 50px;
      background-color: #B0C4DE;
      order: 1;
    }
    .brownC{
      padding: 50px;
      background-color: #663300;
    }
    .yellowC{
      padding: 50px;
      background-color:  #FFCC00;
      order: 3;
    }
    .greenC{
      padding: 50px;
      background-color: #00FF00;
      order: 4;
    }
    .blueC{
      padding: 50px;
      background-color: #336699;
      order: 5;
    }
    @media(min-width: 768px){
      .container{
        display: flex;
        flex-direction: column;
      }
      .content{
        display: flex;
        order: 2;
      }
      .left{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .right{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .brownC{
        padding: 50px;
        background-color: #663300;
        width: 100%;
        order: 1;
      }
      .yellowC{
        padding: 50px;
        background-color:  #FFCC00;
      }
      .greenC{
        padding: 50px;
        background-color: #00FF00;
      }
      .blueC{
        padding: 50px;
        background-color: #336699;
      }
    }
    </style>
  </head>
  <body>
     <div class="container">
      <div class="brownC"></div>
      <div class="content">
        <div class="left">  
          <div class="aquablue"></div>
          <div class="yellowC"></div>
        </div>
        <div class="right"> 
          <div class="greenC"></div>
          <div class="blueC"></div>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您可以在窗口jQuery事件中使用resize移动元素。

JS FIDDLE：https://jsfiddle.net/tejashsoni111/pdr8qyut/

$(document).ready(function(){
    $(window).resize(function(){
        if($(window).width() <= 768){
            jQuery(".aquablue").after(jQuery(".brownC"));
        }else{
            jQuery(".content").before(jQuery(".brownC"));
        }
    })
})

Answer 2

对于纯CSS，您可以使用此解决方案。你要做的就是删除你的“结构div”，在.container上添加flex: row;和flex-wrap: wrap，然后为你的元素添加它们应该的宽度，就像在这种情况下{其余为{1}}和width: 100%; {1}}。它有意义吗？

检查JSFIDDLE

CSS

.brownC

HTML

width: 50%;

flexbox在顶部显示sub-div

2 个答案: