How to align div and make responsiveness after reaching certain resolutions using media queries?

Question

.container {
  width: 600px;
  height: 190px;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.one {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

.two {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.three {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.four {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.five {
  float: right;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {}

<div class="container">
  <div class="one">i am one</div>
  <div class="two">i am two</div>
  <div class="three">i am three</div>
  <div class="four">i am four</div>
  <div class="five">i am five</div>
</div>

I am new to CSS And, I want to make the div's responsiveness. By using the media queries. I want to set the three resolutions like

1. max-width: 600px for small devices like phones,
2. min-width: 600px( portrait tablets and large phones, 600px and up),
3. min-width: 768px( landscape tablets, 768px and up),
4. min-width: 992px( laptops/desktops, 992px and up),
5. min-width: 1200px(large laptops and desktops, 1200px and up),

Answer 1

Working Demo

.container {
  width: 600px;
  height: auto;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.one {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

.two {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.three {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.four {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.five {
  float: right;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}


@media (min-width: 600px) {
  .container  > div  {
      display: flex;
    justify-content: center;
    margin: 0 auto 10px;
    flex-wrap: wrap;
    position: relative;
   
  }
  
  .container  > div.four, 
  .container  > div.five {
    margin-left: calc(50% - 92px)
  }
}

@media (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .container  > div {
    margin: 0 auto 10px ;
  }
}