Change the order of DIV (Structure) using CSS flex

We have many things to do as a frontend developer but the very hated part is to change the structure of the HTML with the same structure but the question here is HOW?

By using javascript? = NO

By using HTML = NO, I would love to but I can't.

By using CSS = YES YES YES we can by using CSS3.

CSS3 had improved and helped a lot to make such thing possible.

Mainly FLEX is one of the most used and loved CSS property which is been used.

so let's take a look a code directly.

HTML:

<div class="wrapper">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
</div>

CSS(SASS):

.wrapper
  border: 1px solid #ccc
  width: 500px
  display: flex
  height: 200px
.box
  height: 30px
  width: 30px
  color: white
  padding: 10px
  font-weight: 600
.one
  background-color: red
  order: 2
.two
  background-color: blue
  order: 1
.three
  background-color: green
  order: 3
.four
  background-color: orange
  order: 4
.five
  background-color: black
  order: 5
@media (max-width: 767px)
  .one
    background-color: red
    order: 5
  .two
    background-color: blue
    order: 4
  .three
    background-color: green
    order: 3
  .four
    background-color: orange
    order: 2
  .five
    background-color: black
    order: 1

USEFUL LINKS:

Codepen URL: https://codepen.io/atulya/pen/BvVVxo

SUPPORT: 

CANIUSE: https://caniuse.com/#feat=flexbox

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/orderppy

Hope you like it, and if you like it please do share it ;)

Happy layout ordering.