Flexbox - 列の順序を変更するにはどうすればよいですか？

Question

私は絵と同じ効果を得る方法を思います。私は多くの方法で試しました...失敗しました。

左の列が同じサイズの4列のフレックスボックスを設定しようとしています。中央の列は残りのスペースを埋める。

私が取得したい効果、

コードは以下の通りです：

.container { 
 
    display: flex; 
 
} 
 

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

 
.box-a { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-b { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-c { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-d { 
 
    background: green; 
 
    height: 800px; 
 
    width: 600px; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <div class="box-a"></div> 
 
    <div class="box-b"></div> 
 
    <div class="box-c"></div> 
 
    </div> 
 
    <div class="box-d"></div> 
 
</div>

Answer 1

あなたはそのためのプロパティを使用することができます。

は、コードとメディアの下に試してみてくださいクエリ。ブラウザのサイズ変更で出力を見ることができます。以下のような

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    display: flex; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
} 
 

 
.box-a { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-b { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-c { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-a, .box-b, .box-c { 
 
    padding: 20px 0; 
 
} 
 

 
.box-d { 
 
    background: green; 
 
    height: 800px; 
 
    width: 600px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    padding: 20px 0; 
 
} 
 
@media only screen and (max-width: 900px) { 
 
    .container { 
 
    display: flex; 
 
    float: left; 
 
    width: 100%; 
 
    flex-direction: column; 
 
} 
 
    .sidebar { 
 
    order: 2; 
 
    display: inline-block; 
 
    flex-direction: column; 
 
    float: left; 
 
    width: 100%; 
 
    } 
 
    .box-a { 
 
    float: left; 
 
    width: 95%; 
 
} 
 
.box-b, .box-c { 
 
    float: left; 
 
    width: 46%; 
 
} 
 
    .box-d { 
 
    order: 1; 
 
    float: left; 
 
    width: 95%; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 

 
.box-b, .box-c { 
 
    float: left; 
 
    width: 95%; 
 
} 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <div class="box-a">box1</div> 
 
    <div class="box-b">box2</div> 
 
    <div class="box-c">box3</div> 
 
    </div> 
 
    <div class="box-d">box4</div> 
 
</div>

Answer 2

使用メディアクエリ。

.container { 
 
    display: flex; 
 
} 
 

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

 
.box-a { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-b { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-c { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-d { 
 
    background: green; 
 
    height: 800px; 
 
    width: 600px; 
 
    margin: 10px; 
 
} 
 

 
@media screen and (max-width: 900px) { 
 
    .container { 
 
    flex-direction: column; 
 
    } 
 
    .box-d { 
 
    order: 1; 
 
    } 
 
    .sidebar { 
 
    order: 2; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    } 
 
    .box-c { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .container { 
 
    flex-direction: column; 
 
    } 
 
    .box-d { 
 
    order: 1; 
 
    } 
 
    .sidebar { 
 
    order: 2; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    } 
 
    .box-a, .box-b, .box-c { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <div class="box-a"></div> 
 
    <div class="box-b"></div> 
 
    <div class="box-c"></div> 
 
    </div> 
 
    <div class="box-d"></div> 
 
</div>

Answer 3

私は、これはちょうどそれを試して、あなたの問題を解決することを願っています。質問のための

.shuflebox { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.one { 
 
    background: red; 
 
    order: 3; 
 
    color:#fff; 
 
} 
 

 
.two { 
 
    background: pink; 
 
    order: 1; 
 
    color:#fff; 
 
} 
 

 
.three { 
 
    background: green; 
 
    order: 2; 
 
    color:#fff; 
 
}

<div class="container shuflebox"> 
 
    <div class="col-sm-4 one"> 
 
<h2> one</h2> 
 
    </div> 
 
    <div class="col-sm-4 two"> 
 
    <h2> two </h2> 
 
    </div> 
 
    <div class="col-sm-4 three"> 
 
<h2> three</h2> 
 
    </div> 
 
</div>