Layaout flex area resolution (wrapped)

by Alejandro M

HTML

<header>Header</header>
<div class="content">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>
<footer>Footer</footer>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header,
footer {
  background: #3498db;
  color: white;
  text-align: center;
  padding: 20px;
}

footer {
  background: #e74c3c;
}

.content {
  display: flex;
  flex: 1;
}

aside {
  background: #2ecc71;
  color: white;
  padding: 20px;
  width: 200px;
}

main {
  background: #f1c40f;
  padding: 20px;
  flex: 1;
}

/* 📱 Mobile */
@media (max-width: 767px) {
  .content {
    flex-direction: column;
  }

  main {
    order: 1;
  }

  aside {
    order: 2;
    width: 100%;
  }
}