Flexbox Holy Grail Layout with `order` Property

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Optional: for full viewport height */
}

.header, .footer {
  flex-shrink: 0; /* Prevents header/footer from shrinking */
}

.main-content {
  display: flex;
  flex-grow: 1; /* Allows main content to take remaining space */
  flex-direction: column; /* For stacking main and sidebar vertically on small screens */
}

.sidebar {
  flex-basis: 200px; /* Default width */
  flex-shrink: 0; /* Prevents sidebar from shrinking */
  order: 3; /* Places sidebar after main on desktop, or adjusts on mobile */
  background-color: #f0f0f0;
  padding: 15px;
}

.main {
  flex-grow: 1; /* Allows main to take remaining space within main-content */
  order: 2; /* Main content before sidebar on desktop */
  background-color: #ffffff;
  padding: 15px;
}

@media (min-width: 768px) {
  .main-content {
    flex-direction: row; /* Desktop: main and sidebar side-by-side */
  }
  .sidebar {
    order: unset; /* Reset order for desktop if sidebar is on the right */
    /* To place sidebar on the right, ensure its order is higher than main, or set main to 1, sidebar to 2 etc. */
    /* For a left sidebar: .main { order: 2; } .sidebar { order: 1; } */
  }
}