🔹 Order چیه؟

ویژگی order مشخص می‌کنه هر آیتم Flex در چه ترتیبی داخل container نمایش داده بشه.
یعنی حتی اگه آیتم‌ها توی HTML یک ترتیب داشته باشن، می‌تونی با order جای اون‌ها رو تغییر بدی.

🔹 کلاس‌های Order در Tailwind

• order-1, order-2, order-3, ... → ترتیب رو مشخص می‌کنن.

• order-first → آیتم همیشه اولین باشه.

• order-last → آیتم همیشه آخرین باشه.

• order-none → ترتیب پیش‌فرض (0).

🔹 مثال (ترتیب ساده)

<div class="flex space-x-2 bg-gray-200 p-2">
  <div class="order-3 bg-blue-400 p-2">1</div>
  <div class="order-1 bg-green-400 p-2">2</div>
  <div class="order-2 bg-red-400 p-2">3</div>
</div>

📌 توی HTML آیتم اول آبی بود، ولی با order آیتم سبز (order-1) اومده اول.

🔹 مثال (first و last)

<div class="flex space-x-2 bg-gray-200 p-2">
  <div class="order-last bg-purple-400 p-2">A</div>
  <div class="order-none bg-yellow-400 p-2">B</div>
  <div class="order-first bg-pink-400 p-2">C</div>
</div>

📌 آیتم صورتی (order-first) همیشه میاد اول، آیتم بنفش (order-last) همیشه آخر.

🔹 نکته مهم

• مقدار پیش‌فرض order برابر با 0 هست.

• آیتمی که عدد order کمتری داره، زودتر نمایش داده میشه.

• order خیلی به درد ریسپانسیو دیزاین می‌خوره: می‌تونی مثلا روی موبایل دکمه رو بیاری بالا و روی دسکتاپ بذاری پایین (md:order-last).