<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/layoutflex.css"> </head> <body> <header> <h1>Cabecera</h1> </header> <main> <aside> <ul> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul> </aside> <section> <h1>Contenido</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p> </section> </main> <footer> <p>Pie de página</p> </footer> </body> </html>
main{ display: flex; } @media (max-width:728px){ main{ flex-direction: column; } } @media (max-width:400px){ footer,aside{ display: none; } }