如何从这些水平堆叠的柔性物品到垂直堆叠的柔性物品？

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 
}