異なる行のスタック順序を変更するflexbox

Question

Goodmorning。フレックスボックスの状況では、2列あるが、最初の列には2列目を配置する必要がある場所が含まれています。だから私は彼らがソースの順序とは異なる順序にする必要が携帯電話では。

これは大

A及びBが1列にあり、そしてCは、他

であるが、小さなブレークポイントで、それは

[A] 
[C] 
[B] 

する必要がある

col 1  col 2 
----------============== 
[A]   [C] 
[B] 

でありますこれはFlexboxだけで可能ですか？

これを明確にする。 HTMLの構造があるような：

row 
    column 
    divA 
    divB 

    column 
    divC 

Codepen example

.a { background-color: green; } 
 
.b { background-color: red; } 
 
.c { background-color: blue; } 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.column { 
 
    flex: 1; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .row { 
 
    flex-direction: row; 
 
    } 
 
}

<div class="row"> 
 
    
 
    <div class="column"> 
 
     <div class="a">A</div> 
 
     <div class="b">B</div> 
 
    </div> 
 
    <div class="column c">C</div> 
 
</div>

Answer 1

あなたはメディアクエリと注文して欲しいものを達成することができます

.a { 
 
    background-color: green; 
 
    order: 1; 
 
} 
 

 
.b { 
 
    background-color: red; 
 
    order: 3; 
 
} 
 

 
.c { 
 
    background-color: blue; 
 
    order: 2; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap;  /* add this so you don't need the extra wrapper div */ 
 
} 
 

 
.row>div { 
 
    width: 50%; /* start off width children being 50% width */ 
 
} 
 

 
@media (max-width: 768px) { 
 
    .row>div { 
 
    /* for small screens */ 
 
    width: 100%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    <div class="c">C</div> 
 
</div>