Html flexbox在顶部显示子div

这就是我想做的：

我将棕色部分分别放在顶部作为

div

。然后是

内容

div

中的其他颜色

我不知道如何在<768px的顶部添加蓝色部分，因为它位于

内容
div
中



标题
身体{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.水蓝色{
填充：50px；
背景色：#B0C4DE；
顺序：1；
}
布朗先生{
填充：50px；
背景色：#663300；
}
yellowC先生{
填充：50px；
背景色：#FFCC00；
顺序：3；
}
格林先生{
填充：50px；
背景色：#00FF00；
顺序：4；
}
布鲁克先生{
填充：50px；
背景色：#336699；
顺序：5；
}
@介质（最小宽度：768px）{
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.内容{
显示器：flex；
顺序：2；
}
.左{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
.对{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
布朗先生{
填充：50px；
背景色：#663300；
宽度：100%；
顺序：1；
}
yellowC先生{
填充：50px；
背景色：#FFCC00；
}
格林先生{
填充：50px；
背景色：#00FF00；
}
布鲁克先生{
填充：50px；
背景色：#336699；
}
}
您可以在窗口
调整大小
事件中使用
jQuery
移动元素

JS小提琴：

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
如果（$（window）.width（）对于纯css，您可以使用此解决方案。您要做的是删除“structural div”，在您的
.container
上添加
flex:row；
和
flex-wrap:wrap
，然后为您的元素提供它们应该的宽度，就像本例中的
宽度：100%；
对于
.brownC
和
宽度：50%；
对于其余元素，这有意义吗

检查

css

html


按照目前的结构，我只能想到一个js解决方案。这是假设你的aquablue是动态高度，就像它看起来是一个内容容器一样？@Dejan.S是的。js解决方案是什么？这可能可以做到，但你会改变你的结构。我会在一分钟内发布js，以及你无法做到的HTML正是这样。你需要稍微修改一下你的HTML以使其可用。@iLiveInAPineappleUnderTheSea我建议你不需要为它添加任何js代码，css会工作得很好，主要是因为很多原因-这不是一个好的做法，js会花很多时间来加载你的页面。你可以通过帮助以任何方式洗牌你的div。如果你给出了一个js解决方案，那么使用debounce来实现它是公平的，这样就不会对性能造成负担。谢谢。我对设计很陌生，这是我第一次使用flex。你能告诉我在哪里可以找到更多像我问题中那样的练习模板吗？我不确定练习模板，但css技巧有一个很棒的广泛gui从de到flexbox，
$(document).ready(function(){
    $(window).resize(function(){
        if($(window).width() <= 768){
            jQuery(".aquablue").after(jQuery(".brownC"));
        }else{
            jQuery(".content").before(jQuery(".brownC"));
        }
    })
})

* {
  box-sizing: border-box;
}

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

.aquablue {
  padding: 50px;
  background-color: #B0C4DE;
  order: 1;
}

.brownC {
  padding: 50px;
  background-color: #663300;
  order: 2;
}

.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 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .brownC {
    width: 100%;
    order: 1;
  }
  .aquablue {
    order: 2;
    width: 50%;
  }
  .yellowC {
    order: 4;
    width: 50%;
  }
  .greenC {
    order: 3;
    width: 50%;
  }
  .blueC {
    order: 5;
    width: 50%;
  }
}

<div class="container">
  <div class="brownC">

  </div>
  <div class="aquablue">

  </div>

  <div class="yellowC">

  </div>
  <div class="greenC">

  </div>
  <div class="blueC">

  </div>
</div>