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以你的榜样为例，这是一个首选的方法。