DRYのFlex注文がありますか？

Question

フレックス使用/ウェブ開発初心者。

私は現在、フレックスコンテナ内の6つのボックスは、モバイルデバイスのために、このように注文した

： Mobile view

コードで多かれ少なかれ、このような（CSS含まれていますが、クラス「ボックス」はあなたが見る灰色のボックスではありません上記）：

<div class="flex-container"> 
    <div class=“box item” /> 
    <div class=“text item”> 
     <h4>Text</h4> 
    </div> 
    <div class=“box item” /> 
    <div class=“text item”> 
     <h4>Text</h4> 
    </div> 
    <div class=“box item” /> 
    <div class=“text item”> 
     <h4>Text</h4> 
    </div> 
</div> 

これは、私は、モバイルデバイスのため何をしたいです！デスクトップ用

しかし、私はこれを達成したいと思います：Desktop View

現在、私はこれを達成しています唯一の方法は、この魅力フレックス注文CSSを使用することです：

item:nth-of-type(1) {order:1;} 
item:nth-of-type(2) {order:2;} 
item:nth-of-type(3) {order:4;} 
item:nth-of-type(4) {order:3;} 
item:nth-of-type(5) {order:5;} 
item:nth-of-type(6) {order:6;} 

を私の質問がありますコンテナ内のすべてのアイテムを注文する必要なく、厄介で反復的なコードブロックを作成しなくても、私の目標（つまり、アイテム3と4の順番を入れ替える）を達成する方法がありますか？

Answer 1

あなたはわずか2 CSSセレクタでそれを達成することができ、かつ0にorderデフォルト値を使用して、我々の再位置項目3と5/6は、ここでのメディアクエリーで行います600pxより広い画面を1と2に設定します。

.item:nth-of-type(3) { order:1; }    /* put 3 after 4 */ 
.item:nth-of-type(n+5) { order:2; }    /* put 5,6 after 3 */ 

スタックが

.flex-container { display: flex; flex-wrap: wrap; } 
 
.item   { height: 50px; flex-basis: 100%; } 
 
.box   { background: lightgray; } 
 

 
@media (min-width: 600px) { 
 
    .item     { flex-basis: 50%; } 
 
    .item:nth-of-type(3) { order:1; }    /* put 3 after 4 */ 
 
    .item:nth-of-type(n+5) { order:2; }    /* put 5,6 after 3 */ 
 
}

<div class="flex-container"> 
 
    <div class="box item"></div> 
 
    <div class="text item"> 
 
    <h4>Text</h4> 
 
    </div> 
 
    <div class="box item"></div> 
 
    <div class="text item"> 
 
    <h4>Text</h4> 
 
    </div> 
 
    <div class="box item"></div> 
 
    <div class="text item"> 
 
    <h4>Text</h4> 
 
    </div> 
 
</div>

Answer 2

あなたがアイテムを並べ替えるかどうか分かっている限り、再注文されたアイテムの後に明示的にアイテムを注文する必要があります。だから、あなたはおそらく行うことができます：

item:nth-of-type(3) {order:4;} 
item:nth-of-type(4) {order:3;} 
item:nth-of-type(5) {order:5;} 
item:nth-of-type(6) {order:6;} 

Answer 3

あなただけの今までこれら二つを切り替えたい場合は、別のフレックスコンテナでそれらをラップする可能性があり、単に以内に注文切り替えます。そうすれば、外部フローを再定義する必要がなくなり、同じことを達成する必要のある他の領域で再利用するようにコンテナを設定することができます。 Tripwireのの答えに加えて

<div class="container"> 
    <div class="item one">One</div> 
    <div class="item two">Two</div> 
    <div class="item three">Three</div> 
    <div class="switch"> 
    <div class="item four">Four</div> 
    <div class="item five">Five</div> 
    </div> 
    <div class="item six">Six</div> 
    <div class="item seven">Seven</div> 
</div> 


.item { 
    flex: 1 0 100%; 
    line-height: 39px; 
    height: 40px; 
    width: 100%; 
    background: #cecece; 
    margin-bottom: 10px; 
    text-align: center; 
} 
.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.switch { 
    display: flex; 
    flex-wrap: wrap; 
    flex: 1 0 100%; 
} 

@media (min-width: 400px) { 
    .switch .item:nth-of-type(1) { 
    order: 2; 
    } 
} 

fiddle

Answer 4

、あなたは第四の後にすべての<div>ため異なる注文番号を設定する必要はありません。

.item:nth-of-type(3), .item:nth-of-type(4) ~ .item {order:100;} 
.item:nth-of-type(4) {order:50;} 

ペン：https://codepen.io/israfel/pen/eEbWWG