我用顺风css制作了3列页面，当屏幕尺寸小于'2xl'时，我想将第一列移动到第二列的顶部，而第三列隐藏在xl断点
<div className="relative z-0 flex overflow-hidden flex-grow">
{/* Start first column */}
<aside className="relative 2xl:order-first 2xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 overflow-y-auto">
<div className="absolute inset-0 py-6 px-1">
</div>
</aside>
{/* End first column */}
{/* Start main area*/}
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<div className="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
</div>
</main>
{/* End main area */}
{/* Start third column */}
<aside className="hidden xl:order-last xl:flex xl:flex-col flex-shrink-0 border-r border-gray-200 w-96">
<div className="inset-0 py-6 px-1"></div>
</aside>
{/* end last column */}
</div>
任何建议或解决方案都将受到欢迎
如果我理解正确的话，我们必须:
- 使布局响应，以便1列布局使用到崩溃xl, 3列直到布局2xl和2列之后
- 隐藏崩溃后的第三列xl
你绝对可以用开箱外的顺风css
实现这个目标- 使用pure: flex设置列的宽度
- 与网格布局:更好IMHO，因为它更稳定，你可以很容易地添加间隙而不破坏布局
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-blue-100">
<div class="text-xl p-4">Pure Flex solution</div>
<div class="flex flex-row flex-wrap bg-red-400 p-4">
<div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-yellow-400">
Column 1
</div>
<div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-gray-400">
Column 2
</div>
<div class="w-full xl:w-1/3 2xl:hidden p-4 bg-blue-400">
Column 3
</div>
</div>
<div class="mt-4 text-xl p-4">Grid solution</div>
<div class="grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-2 gap-4 p-4 bg-pink-400">
<div class="w-full p-4 bg-yellow-400">
Column 1
</div>
<div class="w-full p-4 bg-gray-400">
Column 2
</div>
<div class="w-full 2xl:hidden p-4 bg-blue-400">
Column 3
</div>
</div>
<div class="mt-4 text-xl italic p-4">Other understanding of the need</div>
<div class="grid grid-cols-1 2xl:grid-cols-3 gap-4 p-4 bg-purple-400">
<div class="w-full p-4 bg-yellow-400">
Column 1
</div>
<div class="w-full p-4 bg-gray-400">
Column 2
</div>
<div class="w-full xl:hidden 2xl:grid p-4 bg-blue-400">
Column 3
</div>
</div>
</body>