How to make this responsive design?

Question

I want to make this responsive design using html and css with flexbox:

this is my code:

span {
  font-weight: bold;
  color: aqua;
}

.parent {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: white;
  justify-content: space-around;
  align-items: center;
}

.child {
  display: flex;
  width: 18%;
  height: 71px;
  background-color: #eee;
  align-items: center;
  justify-content: center;
}


/*small screen*/

@media (max-width: 991px) {
  span {
    font-weight: bold;
    color: black;
  }
  .parent {
    display: flex;
    width: 100%;
    background-color: white;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .child {
    display: flex;
    width: 100%;
    height: 71px;
    background-color: #eee;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
}


/*medium screen*/

@media (min-width: 992px) {
  span {
    font-weight: bold;
    color: red;
  }
  .parent {
    display: flex;
    width: 100%;
    background-color: white;
    align-items: center;
    flex-wrap: wrap;
  }
  .child {
    display: flex;
    width: 45%;
    height: 71px;
    background-color: #eee;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
  }
}


/*large screen*/

@media (min-width: 1200px) {
  span {
    font-weight: bold;
    color: aqua;
  }
  .parent {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: white;
    justify-content: space-around;
    align-items: center;
  }
  .child {
    display: flex;
    width: 18%;
    height: 71px;
    background-color: #eee;
    align-items: center;
    justify-content: center;
  }
}

<div class="parent">
  <div class="child"><span>Product one</span>This Is Product</div>
  <div class="child"><span>Product two</span>This Is Product</div>
  <div class="child"><span>Product three</span>This Is Product</div>
  <div class="child"><span>Product four</span>This Is Product</div>
</div>

there is many differences between my code and the design above how can I fix the problems in the code to have like this design? small screen: max-width: 991px. medium screen: min-width: 992px. large screen: min-width: 1200px.

Answer 1

You should add flex-direction:column; to .child class.