如何從這些水平堆疊的柔性物品到垂直堆疊的柔性物品？

Question

下面的代碼水平堆放柔性物品：

.col-12 { 
 
    display: flex 
 
} 
 

 
input { 
 
    flex: 0 0 80% 
 
} 
 

 
label { 
 
    flex: 0 0 20% 
 
}

<div class="col-12"> 
 
    <label>Label</label> 
 
    <input type="text" value=""></input> 
 
</div>

我應該怎麼改變，因此Message是在輸入域的頂部？ （和輸入場充滿整個容器？）

Answer 1

HTML

<div class="col-12"> 
    <label>Label</label> 
    <br> 
    <input type="text" value=""></input> 
</div> 

CSS

.col-12 { 
    display: flex 
    flex-direction: column 
}