css - Hur man ändrar komponentordning efter skärmstorlek i React & TailwindCSS

Jag använder React med Tailwind CSS och vill villkorligt rendera/ordna om komponenter. Låt oss säga att vi vill visa denna ordning när det är mobilstorlek

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

men skrivbordsstorlek

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

I Tailwind CSS kan vi specificera skärmstorleksgränser som sm (minWidth:375px), md (minWidth:415px), lg (minWidth:1200px) och sedan applicera CSS-styling, men hur kan vi använda denna skärmstorlek för att själva villkoret för rendering av en React-komponent?

Svar #1

Jag tror att det kan vara hjälpsamt att kolla denna dokumentation för ordningen på objekten. Du skulle kunna försöka göra något liknande:

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

Svar #2

Grid är ganska användbart för att skapa mer komplex logik som också är lätt att hantera. Betrakta följande, som har 3 olika order definierade:

<div class="grid grid-rows-3">
  <div class="md:row-start-2">1</div>
  <div class="lg:row-start-1">2</div>
  <div class="md:row-start-1 lg:row-start-auto">3</div>
</div>