Reorder flexibility when changing box widths

Question

I have a flexible box in which there are flexible elements, each of which has a specific order.

I want to set it so that when the flex field (not the screen, etc.) becomes smaller than 500px, the order changes (and maybe also one of the fields).

Here is the code:

HTML

<div class="flex-box">
  <div class="flex-item-0"></div>
  <div class="flex-item-0"></div>
  <div class="flex-item-0"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

CSS

.flex-box{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}
.flex-item-0{
  order: 0;
}
.flex-item-2{
  order: 2;
}
.flex-item-3{
  order: 3;
  margin-left: auto;
}

and when it flex-boxgets less than 500px (or whatever the specified amount), I want it to flex-item-3change to:

.flex-item-3{
  order: 1;
  /*margin-left: auto;*/
}

(I comment margin-left: auto;, therefore it is noted that it was withdrawn)

I know that there is @media queries, but I'm not sure how they are applicable in this situation.

- , CSS , ? ( CSS , JS/jQuery)

Answer 1

CSS, , -.

:

@media (max-width:500px) {
  .flex-item-3 {
    order: 1;
    margin-left: initial;
  }
}

---

CODE SNIPPET:

.flex-box {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  /*---Demo---*/
  margin-top: 40px;
  border: 1px solid #262626;
  /*---Demo---*/
}
.flex-item-0 {
  order: 0;
}
.flex-item-2 {
  order: 2;
}
.flex-item-3 {
  order: 3;
  margin-left: auto;
  /*---Demo---*/
  font-weight: bold;
  background-color: tomato;
  /*---Demo---*/
}
@media (max-width: 500px) {
  .flex-item-3 {
    order: 1;
    margin-left: initial;
  }
}

<div class="flex-box">
  <div class="flex-item-0">0</div>
  <div class="flex-item-0">0</div>
  <div class="flex-item-0">0</div>
  <div class="flex-item-2">2</div>
  <div class="flex-item-2">2</div>
  <div class="flex-item-3">3</div>
</div>