html - 在手机上将水平形式转换为垂直形式

我在此页底部有一个表格：

当您从Iphone 4、5、6等屏幕尺寸查看表单时，该按钮完全混乱了。
我想使其具有响应性，因此当您在移动设备上看到页面时，表单将变为垂直而不是水平。

但是说实话，我真的不知道该怎么做？有人有建议吗？

最好的祝福

最佳答案

只有一个变化

@media screen (max-width: 480px){
  .signup-wide #signupForm{
    flex-direction: column;
    align-items: center;
  }
}

这是一个最小的完整示例。
在此Demo中，表格将在480px的屏幕宽度以下变为垂直

#signupForm{
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 480px){
	#signupForm{
		flex-direction : column;
	}
}

<form action="" id="signupForm">
	<input type="text">
	<input type="text">
	<input type="submit" value="submit">
</form>