<h2> flex-grow </h2> <div class="wrapper default"> <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; } .default { } .order1 { .a { order : 1;} } .box { background-color: #20262e; color: #fff; border-radius: 3px; padding: 20px; margin:10px; font-size: 14px; width:fit-content; }