CSS Flexbox: Use the order Property to Rearrange Items

HTML-CSS
1

Tell us what’s happening:
please, can anyone explain to me why box1 and box2 gave the same value even with different value of orders

Your code so far
‘’’’’’’

#box-container { display: flex; height: 500px; } #box-1 { background-color: dodgerblue; height: 200px; width: 200px; } #box-2 { background-color: orangered; height: 200px; width: 200px; }
2

Can you post a link to the challenge? I don’t remember this one?

#box-container { display: flex; height: 500px; }
#box-1 { background-color: dodgerblue; height: 200px; width: 200px; }
#box-2 { background-color: orangered; height: 200px; width: 200px; }
3

ok
https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items

4

Thank you.

This challenge is asking you to include the order property for children of a Flex container:

" The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used."

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    order: ????
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    ??????
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
``