Center divs in flexbox

Question

I am using flex and I am trying to achieve something. There are 5 divs shown in the code. In min-width:768px I want the fourth and the fifth div to be centered. Can anyone help me? Here is the code:

css

.row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  .col {
  position: relative;
  width: 100%;
  border:1px solid black;
  }
  @media  (min-width:576px){
    .col {
      -ms-flex: 0 0 33%;
      flex: 0 0 33%;
      max-width: 33%;
    }
  }
  @media (min-width: 768px){
    .col {
      -ms-flex: 0 0 19%;
      flex: 0 0 19%;
      max-width: 19%;
    }
  }

html

 <div class="row">
  <div class="col"><p>first</p>  </div>
  <div class="col"><p>second</p>  </div>
  <div class="col"><p>third</p>  </div>
  <div class="col"><p>fourth</p>  </div>
  <div class="col"><p>fifth</p>  </div>  
</div>

Answer 1

here is your code I have correct it. you just work with little bit of css

 .row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
   justify-content: center;
  }
  .col {
  position: relative;
  width: 100%;
  border:1px solid black;
  }
  @media  (min-width:576px){
      .col {
      -ms-flex: 0 0 19%;
      flex: 0 0 19%;
      max-width: 19%;
    }
  }
  @media (min-width: 768px){


    .col {
      -ms-flex: 0 0 33%;
      flex: 0 0 33%;
      max-width: 33%;
    }
  }




 <div class="row">
  <div class="col"><p>first</p>  </div>
  <div class="col"><p>second</p>  </div>
  <div class="col"><p>third</p>  </div>
  <div class="col"><p>fourth</p>  </div>
  <div class="col"><p>fifth</p>  </div>  
</div>

Answer 2

You could try this in your media query:

  @media (min-width: 768px){
    .col {
      -ms-flex: 0 0 19%;
      flex: 0 0 19%;
      max-width: 19%;
    }

    .col:nth-child(4),
    .col:nth-child(5){
      text-align: center;
    }
  }