Placement des div responsive

Bonjour,
Au lieu de longues descriptions, on préfèrerait du code et/ou une page en ligne :mrgreen:

Néanmoins, votre problème m'intéressait. Je vous propose donc un petit exemple de mise en page responsive sur 3 colonnes.
En grande résolution, les DIV sont alignées avec la DIV principale au centre, et en petite elles sont superposées avec la DIV principale en haut.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Mise en page responsive sur trois colonnes.</title> <style> * { box-sizing: border-box; text-align: center; } div { height: 12em; } header, footer { /* clear: both; */ /* Pour FOOTER si besoin */ height: 2em; background: #aaa; } .main { background: #ddd; } .a { background: #abc; } .b { background: #def; } @media screen and (min-width: 800px), handheld and (min-width: 800px) { /* Exemple de résolution */ div { display: inline-block; width: 33.33%; } .a { float: left; } .b { float: right; } } </style> </head> <body> <header>HEADER</header> <div class="main">CENTER/TOP</div> <div class="a">LEFT/MIDDLE</div> <div class="b">RIGHT/BOTTOM</div> <footer>FOOTER</footer> </body> </html>