Center divs in flexbox - html

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

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;
}
}

Answer 2

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>