1
flex-directionのローを使用してdivのすべてを保持する1つのプライマリコンテナがあります。メディアクエリでネストされたフレックスコンテナにローを追加する
ネストされた第2のコンテナは、flex-directionの列を持つ2つのdivを保持し、2つの外部コンテナ内の1つの行に2つずつスタックします。
flex-boxとメディアクエリを使用して、ブラウザの幅が1000px未満になると、既存の2行の列div「小さいコンテナ」を3行の列divに変更しようとしていました。
Iはsmaller-container内の第3空divを作成し、ブラウザの幅は1000px未満で一旦小さい容器外部DIVとの順序を交換することによってこれを実行しようとしました。
動作しませんでした。問題の2つのdiv（空のdivと外側のdiv）が異なる入れ子レベルにあるためです。
誰かが1つの列の2つの行を1つの列の3つの行に変える解決法を見つけることができれば、素晴らしいことでしょう。
このソリューションに入れ子になった容器が必要ない場合は、さらに優れています。プラグインを必要としない場合は、Javascriptのソリューションも歓迎です。それがどのように見えるべきかの
画像：
/*Basic Reset*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
max-width: 1366px;
margin: auto;
width: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box-1 {
order: 1;
background-color: red;
height: 150px;
width: 50%;
}
.smaller-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 50%;
order: 2;
}
.box-2 {
order: 3;
background-color: blue;
height: 75px;
width: 100%;
}
.box-3 {
order: 4;
background-color: green;
height: 75px;
width: 100%;
}
.box-4 {
order: 5;
width: 100%;
}
.box-5 {
order: 6;
background-color: orange;
height: 150px;
width: 100%;
}
@media screen and (max-width: 1000px) {
.box-2 {
height: 50px;
}
.box-3 {
height: 50px;
}
/******* Here we swap the empty div that hasbeen existing in the smaller container
with an outer div ********/
.box-5 {
order: 5;
height: 50px;
}
.box-4 {
order: 6;
background-color: purple;
height: 150px;
}
}
[image of desired solution][1] [1]:http://i.stack.imgur.com/vlvlx.png<div class="container">
<div class="box-1"></div>
<div class="smaller-container">
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</div>
<div class="box-5"></div>
</div>https://jsfiddle.net/lukindo/nuv603h9/1/
、[upvoteを考える]（http://stackoverflow.com/help /誰かの回答）。義務はありません。質の高いコンテンツを宣伝するための1つの方法。 –