Как изменить порядок компонентов React с помощью CSS Grid?

Question

|----------|
| Form     |
|----------|   //current layout
| Bookings |
|----------|


|----------|
| Bookings |
|----------|   //desired layout
| Form     |
|----------|

Как я могу изменить порядок компонентов, чтобы я мог отображать <Bookings /> компонент перед <form>?

Решение не должно изменять порядок файлов JSX компонентов, так как это желательно только в одной из многих точек останова.

JSX-файл

<main className="Form-container">
  <form className="booking-form-business">
     <WorkingHours />
  </form>
  <ContextProvider>
     <Bookings /> //main div has a 'bookings' class
  </ContextProvider>
</main>

S CSS файл

.Form-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    .booking-form-business {
      grid-column: 1 / -1;
    }

    .bookings { //how to display this before 'booking-form-business'
      grid-column: 1 / -1;
    }
}

Answer 1

Используйте свойство order, если у вас есть display: grid

.Form-container {
    .booking-form-business {
      grid-column: 1 / -1;
      order: 2;
    }
    .bookings {
      grid-column: 1 / -1;
      order: 1;
    }
}