將某些容器移動到兩側而不損害其他容器

Question

我一直在環顧四周，無法找到將特定容器移動到頁面兩側的方法，同時保持其他容器完好無損。

我會想什麼來實現對移動和桌面屏幕下面的佈局，分別爲：Desktop和Mobile

注意顏色：在第三行的移動佈局應成爲左列在桌面佈局上，移動佈局上的第五個行應該在桌面佈局上成爲右側列。
其餘行應保留爲桌面上的中間列。

我試圖通過使用Flexbox來實現這一點，但無法正確完成。

我很樂意聽取建議。
謝謝！

Answer 1

看起來像一個有趣的練習。這有點粗糙，但基本知識在那裏。

Codepen demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
} 
 
.wrap { 
 
    height: 100%; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.child, 
 
.aside { 
 
    flex: 1; 
 
    background: plum; 
 
    order: 1; 
 
} 
 
.aside { 
 
    background: #c0ffee; 
 
} 
 
@media screen and (min-width: 760px) { 
 
    .wrap { 
 
    flex-wrap: wrap; 
 
    } 
 
    .child { 
 
    order: 2; 
 
    width: 80%; 
 
    flex: 1 0 25%; 
 
    } 
 
    .left { 
 
    order: 1; 
 
    width: 10%; 
 
    flex: 0 0 100%; 
 
    } 
 
    .right { 
 
    order: 3; 
 
    width: 10%; 
 
    flex: 0 0 100%; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="child">One</div> 
 
    <div class="child">Two</div> 
 
    <div class="aside left">Three</div> 
 
    <div class="child">Four</div> 
 
    <div class="aside right">Five</div> 
 
    <div class="child">Six</div> 
 
</div>