フレックスボックスのサイドバーは新しい行を共有できますか？

Question

メディアクエリの後にフレックスボックスのサイドバーに新しい行を共有させることはできますか？ （狭い画面上の）後

+---+-------+---+ 
| |  | | 
| L | Main | R | 
| |  | | 
+---+-------+---+ 

（ワイド画面上の）前

+-------+ 
|  | 
| Main | 
|  | 
+-------+ 
| | | 
| L | R | 
| | | 
+-------+ 

HTML（メディアクエリの後に変更できません）

<div class="container"> 
    <div class="sideLeft">L</div> 
    <div class="MainContent">Main</div> 
    <div class="sideRight">R</div> 
</div> 

Answer 1

あなたは上order: -1を変更することができますメディアクエリを伴うmain div。 container要素にflex-wrap: wrapを設定する必要もあります。またcalc(% - 10px)は両側に5pxののmarginのためですが、あなたはちょうどあなたができるSE here

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
    border: 1px solid gray; 
 
    padding: 5px 
 
} 
 
.container > div { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    flex: 1; 
 
} 
 
div.main { 
 
    flex: 3; 
 
} 
 
@media(max-width: 480px) { 
 
    div.main { 
 
    order: -1; 
 
    flex: 0 0 calc(100% - 10px); 
 
    } 
 
    .container > div:not(.main) { 
 
    flex: 0 0 calc(50% - 10px); 
 
    } 
 
}

<div class="container"> 
 
    <div class="sideLeft">L</div> 
 
    <div class="main">Main</div> 
 
    <div class="sideRight">R</div> 
 
</div>