如何在 React 和 Tailwind CSS 中按屏幕大小更改组件顺序答案

【问题标题】：How to change component order by screen size in React & TailwindCSS如何在 React 和 Tailwind CSS 中按屏幕大小更改组件顺序
【发布时间】：2022-01-09 03:54:16
【问题描述】：

我正在使用带有 Tailwind CSS 的 React，并希望有条件地渲染/重新排序组件。假设我们要在移动尺寸时显示此订单

<div1 />
<div2 />
<div3 />

但桌面大小

<div3 />
<div1 />
<div2 />

在 tailwind css 中，我们可以指定屏幕尺寸边框，如 sm (minWidth:375px)、md (minWidth:415px)、lg (minWidth:1200px) 然后应用 css 样式，但是我们如何使用这个屏幕尺寸来处理 React 组件本身的渲染条件？

【问题讨论】：

你可以试试<div><div1 class="lg:hidden"/><div3 class="hidden lg:block"/><div>是一种条件渲染
它不适用于像您的示例那样的任意重新排序，但使用flex-col-reverse 或flex-row-reverse 可能会满足某些情况。例如：sm:flex sm:flex-col-reverse。见：tailwindcss.com/docs/flex-direction#column-reversed

标签： css reactjs typescript react-hooks tailwind-css

【解决方案1】：

我认为checking this documentation 的项目顺序可能会有所帮助。您可以尝试执行以下操作：

<div className="flex flex-col">
 <div className="lg:order-last">01</div>
 <div>02</div>
 <div>03</div>
</div>

【讨论】：