Html 使用flex row和flex col时，顺风未正确对齐（使用计算机和电话）

我的一个网站遇到了一个问题，它试图使用flexbox和flex-row-sm:flex-col的tailwind使其具有响应性，并且它不是以行输出，而是以奇怪的列输出。请记住，我正在使用Swiper进行幻灯片放映

这是到目前为止我的代码

1.


2.


3.


4.


5.


6.


7.

您在描述中正确地编写了

flex col

，但代码显示的是

flex column

。首先，你需要纠正这一点。然后添加

flex

类，该类设置

display:flex。没有这一点，任何flex属性都无法工作

此外，您还需要回顾“移动优先”的概念。这意味着，应用于较小屏幕大小的任何类也将应用于较大屏幕大小，除非覆盖它们。因此，例如，
flex row sm:flex col md:flex col lg:flex row xl:flex row justify center h-full
与
flex row sm:flex col lg:flex row justify center h-full
相同