Flexbox的欄佈局響應與列重新排序沒有固定的高度

Question

我試圖用Flexbox的做到這一點=>

桌面：

|   | | block 1 | 
| block 2 | 
|   | | block 3 | 

移動：

block 1 
block 2 
block 3 

我來到這個

.cont { 
    display: flex; 
    flex-direction: column; 
    flew-wrap: wrap-reverse; 
} 

.myblocks.block2 { 
    order: -1; 
} 

@media screen and (max-width: 640px) { 
    .cont { 
    display: block; 
    } 
} 

個但這不起作用，直到我設定一個固定的height到.cont和flex-basis到.block1

---

問題：

• 有與Flexbox的辦法來做到這一點，沒有固定的身高？
• 是flexbox的正確工具嗎？

---

注：我使用的是布爾瑪

Answer 1

你可以做到這一點很容易與電網：

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; /* creates two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */ 
 
} 
 

 
.item { 
 
    border: 1px solid; 
 
} 
 

 
.item:nth-child(2) { 
 
    grid-row: 1/3; /* spans two rows */ 
 
} 
 

 
@media screen and (max-width: 640px) { 
 
    .grid { 
 
    grid-template-columns: 1fr; /* one column */ 
 
    } 
 
    .item:nth-child(2) { 
 
    grid-row: initial; /* back to default */ 
 
    } 
 
}

<div class="grid"> 
 
    <div class="item">Block 1</div> 
 
    <div class="item">Block 2</div> 
 
    <div class="item">Block 3</div> 
 
</div>

哪一個， b以你的榜樣爲例，這是一個首選的方法。