Flexbox：入れ子なしで要素を折り返す

Question

私は携帯電話で特定の順序に従っており、デスクトップ/タブレット上で並べ替えるべきフレックスボックスレイアウトを持っています。すべての要素は、並べ替えることができる1つのラッパーにスローされます。

次のように携帯電話上の順序は次のとおりです。別に第一
を
- >画像1
コンテンツ
別に第一
- >画像2
別に第二
- >画像3

デスクトップで私は持っていると思います：
脇の最初の
- >画像1
- >画像2
コンテンツ
別に第二
- >画像3

だから、デスクトップ上の問題は、第二の画像が最初の画像の下にラップする必要があるということです。ネスティングは、モバイルで希望の注文を投げるのでここではできません。

<div class="wrapper"> 

    <div class="left-first"> 
    <img src="http://lorempixel.com/g/200/200/"> 
    </div> 

    <div class="content"> 
    [ ... ] 
    </div> 

    <div class="left-second"> 
    <img src="http://lorempixel.com/g/300/300/"> 
    </div> 

    <div class="right"> 
    <img src="http://lorempixel.com/g/250/250/"> 
    </div> 
</div> 

私はこのフィドルに問題があることを示してみましょう：あなたの助けを https://jsfiddle.net/wd8obb0k/

おかげでたくさん！

Answer 1

これはflexで達成できない要求です。

しかし、あなたの場合は少しのトリックで処理することができます。

私はフレックス基礎が固定であるという事実に頼って、あなたの左2番目の項目にいくつかのプロパティを追加した、とイメージが正方形であることを：

.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    background-color: pink; 
 
} 
 
img { 
 
    width: 100% 
 
} 
 
.content { 
 
    flex: 1 0 60% 
 
} 
 
.left-first, 
 
.left-second, 
 
.right { 
 
    flex: 0 0 20%; 
 
} 
 
.left-first { 
 
    order: 0; 
 
} 
 
.left-second { 
 
    order: 1; 
 
    margin-left: -20%; 
 
    margin-bottom: 20%; 
 
    transform: rotate(-90deg) translateX(-100%) rotate(90deg); 
 
} 
 
.content { 
 
    order: 2 
 
} 
 
.right { 
 
    order: 3 
 
}

<div class="wrapper"> 
 

 
    <div class="left-first"> 
 
    <img src="http://lorempixel.com/g/200/200/"> 
 
    </div> 
 

 
    <div class="content"> 
 
    <h3>H3 - Lorem ipsum Incididunt magna nostrud sint.</h3> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3> 
 
    <p> 
 
     Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation. 
 
    </p> 
 
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3> 
 
    <p> 
 
     Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation. 
 
    </p> 
 
    </div> 
 

 

 
    <div class="left-second"> 
 
    <img src="http://lorempixel.com/g/300/300/"> 
 
    </div> 
 

 
    <div class="right"> 
 
    <img src="http://lorempixel.com/g/250/250/"> 
 
    </div> 
 
</div>