フレックス方向の列であるが、お互いに隣り合う2つの子供がデスクトップの順番が異なる

Question

これはデスクトップのレイアウトがflex-direction: rowで、モバイルの場合はflex-direction: columnでなければならないレスポンシブデザインの一部です。しかし、2つの要素oneとthreeは、互いの上にではなく、隣り合っていなければなりません。 （コンテナ内に置くことはできませんので、デスクトップのレイアウトが壊れてしまいます）。

これをFlexboxで実現する方法はありますか？

.flex-container-desktop { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

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

 
.child { 
 
    border: 1px solid red; 
 
    margin-right: 10px; 
 
    padding: 5px; 
 
} 
 

 
.two { 
 
    order: 1; 
 
} 
 

 
.three { 
 
    order: 2; 
 
} 
 

 
.one { 
 
    order: 3; 
 
}

<b>Desktop</b> 
 
<div class="flex-container-desktop"> 
 
    <div class="child one-desktop"> 
 
Child 1 
 
    </div> 
 
    <div class="child two-desktop"> 
 
Child 2 
 
    </div> 
 
    <div class="child three-desktop"> 
 
Child 3 
 
    </div> 
 
</div> 
 
<hr> 
 
<b>Mobile</b> 
 
<div class="flex-container"> 
 
    <div class="child one"> 
 
Child 1 
 
    </div> 
 
    <div class="child two"> 
 
Child 2 
 
    </div> 
 
    <div class="child three"> 
 
Child 3 
 
    </div> 
 
</div> 
 

 
<br> 
 
Child 3 and 1 should be next to each other only on mobile.

Answer 1

あなたはflex-direction: rowとメディアクエリでこれを行うことができます。したがって、モバイルビューでは、順序を変更し、最初の要素をflex: 0 0 100%と他の2つの要素50%で全幅にします。 flex-wrap: wrapを設定することも重要なので、他の2つの要素は次の行に移動します。

* { 
 
    box-sizing: border-box; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.child { 
 
    border: 1px solid; 
 
    flex: 1; 
 
    padding: 5px; 
 
} 
 
@media(max-width: 768px) { 
 
    .two { 
 
    order: 1; 
 
    flex: 0 0 100%; 
 
    } 
 
    .three { 
 
    order: 2; 
 
    flex: 0 0 50%; 
 
    } 
 
    .one { 
 
    order: 3; 
 
    flex: 0 0 50%; 
 
    } 
 
}

<div class="flex-container"> 
 
    <div class="child one"> 
 
    Child 1 
 
    </div> 
 
    <div class="child two"> 
 
    Child 2 
 
    </div> 
 
    <div class="child three"> 
 
    Child 3 
 
    </div> 
 
</div>