/* Base mobile donnée : */
.container { width: 100%; padding: 15px; }
.nav-menu { display: flex; flex-direction: column; gap: 5px; }
.content { display: block; }
.sidebar { display: none; }
/* Ajoutez les media queries pour tablette et desktop : */
/* Tablette (ex: min-width: 768px) */
@media (min-width: 768px) {
.nav-menu {
flex-direction: row;
}
.content {
display: flex;
}
.sidebar {
display: block;
width: 250px;
}
}
/* Desktop (ex: min-width: 1024px) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
.sidebar {
width: 300px;
}
}
DÉMONSTRATION
Redimensionnez la fenêtre de votre
navigateur pour voir le layout changer.