What is the behavior of the "order" property when not defined?

Question

My goal is this:

The site has a shopping area that displays 3 different plans. When this plane area is accessed on a screen larger than 800px wide, it is displayed as follows:

The plans are laid out side by side.

However, when the screen is smaller than the width previously said (800px), I need the order of the plans to be changed: the plan GOLD needs to appear first, the SILVER second and the COPPER third.

The problem: (I recommend you skip straight to the @media which is where the property is located order and that’s also where the problem is)

.preco {
    background-color: #f7f7f7;
    padding: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: 400px;
    margin: 0 auto;
}

.preco-item {
    flex: 1 1 260px;
    border: 4px solid white;
    padding: 20px;
    margin: 10px;
}

.preco-item h2 {
    font-size: 3em;
    color: #a4a4a4;
    text-align: center;
    margin-top: 20px;
}

.preco-item span {
    max-width: 300px;
    margin: 20px auto;
    display: block;
    font-size: 3em;
    text-align: center;
    font-weight: bold;
    padding: 10px 0 5px 0;
    border-top: 4px solid white;
    border-bottom: 4px solid white;
}

.preco-item sup {
    font-size: 1.5rem;
}

.preco-item ul {
    max-width: 300px;
    margin: 20px auto;
    font-size: 1.25em;
    line-height: 1;
    font-style: italic;
    color: #7c7c7c;
}

.preco-item li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.preco-item li::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: #2c70ff;
    border-radius: 50%;
}

.preco a {
    max-width: 300px;
    display: block;
    margin: 20px auto;
    border: 4px solid;
    color: #222222;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2.25em;
    padding: 15px 0;
    text-align: center;
}

@media (max-width: 800px) {
    .preco {
        padding-left: 10px;
        padding-right: 10px;
    }

    .preco .preco-item:nth-child(3) {
        order: 0;
    }

    .preco .preco-item:nth-child(2) {
        order: 1;
    }
}

<section class="preco" id="preco">

        <div class="preco-item">

            <h2>Cobre</h2>

            <span><sup>R$</sup>19</span>

            <ul>

                <li>Planos Ilimitados</li>
                <li>Acesso Restrito</li>
                <li>Conteúdo Secreto</li>
                <li>Suporte 24h</li>
    
            </ul>

            <a href="#">Comprar</a>

        </div>

        <div class="preco-item">

            <h2>Prata</h2>

            <span><sup>R$</sup>39</span>

            <ul>

                <li>Planos Ilimitados</li>
                <li>Acesso Restrito</li>
                <li>Conteúdo Secreto</li>
                <li>Suporte 24h</li>
                <li>Compra Exclusiva</li>
    
            </ul>

            <a href="#">Comprar</a>

        </div>

        <div class="preco-item">

            <h2>Ouro</h2>

            <span><sup>R$</sup>79</span>

            <ul>

                <li>Planos Ilimitados</li>
                <li>Acesso Restrito</li>
                <li>Conteúdo Secreto</li>
                <li>Suporte 24h</li>
                <li>Compra Exclusiva</li>
                <li>Download dos Items</li>
    
            </ul>

            <a href="#">Comprar</a>

        </div>

    </section>

In my mind:

• If the third son receives order: 0;, he gets to stay in first place.
• If the according to son receives order: 1;, this happens to stay in according to place.
• And the last, which was not declared, would logically be in the third position. But that’s not what happens.

I know that if I specifically declare a third :nth-child() and put order: 2; the layout starts to respond the way I want. I just want to understand the logic of why it doesn’t automatically assume the value of the next element.

Answer 1

Roughly all elements inside and a Flex container are order: 0 . So even for the element you did not explicitly state order: 0, he is order: 0 by default.

One detail is that you can use negative values for the order, so if you want the Gold first, you can for example put order: -1 in it, then it jumps to the first position as it is less than 0 :D. AND NO Copper you put order: 1; and he goes to the bottom of the list because the Silver already is order: 0 by default as I said.

---

Now a clever hint!

You don’t need order in your kids to do that, just change the flex-direction from father to row-reverse that the order of the children will be reversed!

.pai {
  display: flex;
  justify-content: center;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
  

<p>Pai flex com row-reverse<p>
<div class="pai" style="flex-direction: row-reverse;" >
  <div class="box">1 - OURO</div>
  <div class="box">2 - PRATA</div>
  <div class="box">3 - COBRE</div>
</div >

<p>Pai flex com SEM row-reverse<p>
<div class="pai" >
  <div class="box">1 - OURO</div>
  <div class="box">2 - PRATA</div>
  <div class="box">3 - COBRE</div>
</div >