<h3> order </h3> <div class="wrapper"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div>
body { padding: 20px; font-family: Helvetica; } .wrapper { display: flex; background-color:#eee; margin-bottom:10px; border:1px solid #CCC; } .a { order: 2;} .c { order: 1;} .e { order: 1;} .f { order: 1;} .flex-start { justify-content:flex-start; } .flex-end { justify-content:flex-end; } .center { justify-content:center; } .space-between { justify-content:space-between; } .space-around { justify-content:space-around; } .box { background-color: #20262e; color: #fff; border-radius: 3px; padding: 20px; margin:10px; font-size: 14px; width:fit-content; }