$("main").addClass("clear"); 
 * { margin: 0; padding: 0; } .clear { display: block; clear: both; } .clear:after { content: ""; display: block; clear: both; } html, body header:first-child { margin: 0 auto; } header, main, menu, footer, aside, section, article { display: block; } header, menu, main, footer { width: 80%; margin: .2% auto; -moz-box-shadow: -1px 2px 13px 4px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: -1px 2px 13px 4px rgba(0, 0, 0, 0.4) inset; box-shadow: -1px 2px 13px 4px rgba(0, 0, 0, 0.4) inset; border-radius: 4px; } header, footer { min-height: 120px; } main { box-shadow: none; } aside, article, section { float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; -moz-box-shadow: -1px 2px 13px 4px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: -1px 2px 13px 4px rgba(0, 0, 0, 0.4) inset; box-shadow: -1px 2px 13px 4px rgba(0, 0, 0, 0.4) inset; } aside { width: 25%; min-height: 150px; } article { width: 44%; min-height: 220px; margin-left: .5%; margin-right: .5%; } section { width: 30%; min-height: 200px; } @media screen and (max-width: 860px) { section { display: none !important; } aside, article { float: left; } aside { width: 30%; min-height: 150px; } article { min-height: 200px; width: 70%; margin: 0; } } @media screen and (max-width: 640px) { body { background: yellow; } main { display: flex; flex-direction: column; justify-content: space-between; /*flex-wrap: wrap;*/ } article { width: 100%; order: 1; } aside { width: 100%; order: 2; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> header </header> <menu> menu </menu> <main> <aside class=""> aside </aside> <article class=""> article </article> <section> section </section> </main> <footer> footer </footer>

  • I put for aside -order 2, and he is the "skatina" and stands first - user33274
  • Checked, aside goes second with a width of less than 640px, as intended. - edem
  • cloud.mail.ru/public/21h7/T9fY99j9b here's the screen - see - user33274
  • and in snippet all type of top, but not in the browser, vendor prefixes did and does not work - user33274

1 answer 1

 $("main").addClass("clear"); 
 * { margin: 0; padding: 0; } .center { display: block; margin: auto; border: 1px solid transparent; width: 70%; } header { background: red; min-height: 120px; } menu { background: blue; } main { background: #fff; display: flex; display: -webkit-flex; justify-content: space-between; } main * { min-height: 200px; } aside { background: yellow; width: 30%; order: 2; } article { background: brown; width: 40%; order: 3; } section { background: chocolate; width: 25%; order: 1; } footer { background: pink; min-height: 100px; } @media screen and (max-width: 640px) { main { display: flex; flex-direction: column; } section { display: none; } article { order: 1; width: 100%; } aside { order: 2; width: 100%; min-height: 120px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="center"> <header> header </header> <menu> menu </menu> <main> <aside> aside </aside> <article> article </article> <section> section </section> </main> <footer> footer </footer> </div>

My answer is that I had to initially impose on the Flexbox - I found the solution myself, an example in the snippet