There is such an order of elements in the html-code:

<aside class="leftaside"></aside> <aside class="mainaside"></aside> <section class="mainsection></section> <aside class="rightaside"></aside>

On a large screen, elements are positioned correctly, how to make so that when the resolution decreases (increasing the mainaside and mainsection width by 100%), the left and right aside is removed, is the mainsection going first and only behind it mainaside?

  • Dig into CSS media queries - Lim0ncmon

1 answer 1

So with the help of flexs, this can be easily resolved (if I understood the grid correctly):

 * { box-sizing: border-box } body { margin: 100px; background: #39A2AE; font-family: 'PT Sans', sans-serif; color: #fff; } .fbox { display: flex; max-width: 800px; margin: 50px auto; padding: 10px; border: 2px solid #fff; } .leftaside, .rightaside, .mainaside { width: 20%; border: 1px solid #fff; margin: 2px; padding: 20px; text-align: center; } .mainsection { flex: 1; text-align: center; padding: 20px; } @media screen and (max-width: 800px) { .leftaside, .rightaside { display: none; } .fbox { flex-direction: column; } .fbox > * { width: 100%; } .mainsection { order: 1; } .mainaside { order: 2; } } 
 <div class="fbox"> <aside class="leftaside"> left side </aside> <aside class="mainaside"> mainaside </aside> <section class="mainsection"> mainsection </section> <aside class="rightaside"> rightaside </aside> </div>

  • mainsection also goes block, will this code work? - SvArt713
  • What now does not correspond to the expected result? - NeedHate
  • At some point, the screen is divided in half between the mainsection and the mainaside, and I need to first strictly section, then aside - SvArt713
  • Everything, everything turned out, thank you very much! ) - SvArt713