|----------|
| Form |
|----------| //current layout
| Bookings |
|----------|
|----------|
| Bookings |
|----------| //desired layout
| Form |
|----------|
Is there a way to adjust the order of components in the <main> container so that the <Bookings /> component is displayed before the <form>?
The solution should maintain the current JSX file order of components, with this change only applying at specific breakpoints.
JSX file
<main className="Form-container">
<form className="booking-form-business">
<WorkingHours />
</form>
<ContextProvider>
<Bookings /> //main div has a 'bookings' class
</ContextProvider>
</main>
SCSS file
.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;
}
}