freeCodeCamp Challenge Guide: Use the order Property to Rearrange Items

Guide
1

Use the order Property to Rearrange Items

Problem Explanation

Before you make any changes, pay attention to the order of the colors. You get blue on the left and red ont eh right. After you set the order property you will be able to pick which one should be displayed first without having to change the html code.

Solutions

Solution 1 (Click to Show/Hide) 
<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    order: 2;
    height: 200px;
    width: 200px;
  }

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

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