3つ目のみを残して2つのフレックスコラムを組み合わせるときのトラブル

Question

現在フレックスを使用して自分のウェブサイトのレイアウトを制御しています。 display：flexと3つのフレックスカラムが表示された1つの 'container'があります。これを以下に示します。私がしたいのは、画面の幅が小さくなるにつれて、私はCSSを使って順序を変更したいのですが、2つの列を組み合わせて別々のものにすることもします（下にも示します）。 ）。どのようにこれを行うでしょうか？フレックスの方向を変えて縦にすることはできますが、3列目は含めないでください。

How it is now:      How I want it :) 
|------| |------| |------|   |------| |------| 
|  | |  | |  |   | A | | B | 
| A | | B | | C |   -------- |  | 
|  | |  | |  |   |------| -------- 
-------- -------- --------   | C | 
            -------- 

あなたが見ることができるように、私はCブロックは、順序を変更し、単独でBを残したまま、Aの下にスタックします。

ありがとうございました。

Answer 1

はあなたがwrapとnowrap間flex-wrapを切り替えることができ

.item { 
 
    width: 33.33%; 
 
    height: 200px; 
 
    background: red; 
 
    border: solid 2px #000; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
@media screen and (max-width: 1000px) { 
 
    .item { 
 
    width: 50%; 
 
    } 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .item { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 2

このコードを試してみてください。

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flex > div { 
 
    flex-basis: 50%; 
 
} 
 
@media (min-width: 650px) { 
 
    .flex { 
 
    flex-wrap: nowrap; 
 
    } 
 
}

<div class="flex"> 
 
    <div>A</div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
</div>