Position of elements in Bootstrap - html

Question

I have 7 images. I need to see 5 images in one row, and 2 more images in another row below in the center. I made 5 images in a row, but I can not position the other 2 images in the center below. Also, in responsive version I need 2 images under each other and 1 image in the center and they need to have border-radius:100%, but it does not work. What`s wrong with my code?
This is html:
#media all and (max-width: 1024px) {
.ring {
border-radius: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm col-6">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="0.1s" style="border-radius: 0;">
<img src="img/1.jpg" style="border-radius: 100%;">
</div>
</div>
<div class="col-sm col-6">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="0.3s" style="border-radius: 0;">
<img src="img/2.jpg" style="border-radius: 100%;">
</div>
</div>
<div class="col-sm col-6 hightechxl">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="0.5s" style="border-radius: 0;">
<img src="img/1.jpg" style="border-radius: 100%;">
</div>
</div>
<div class="col-sm col-6">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="0.7s" style="border-radius: 0;">
<img src="img/2.png" style="border-radius: 100%;">
</div>
</div>
<div class="col-sm col-6">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="0.9s" style="border-radius: 0;">
<img src="img/1.png" style="border-radius: 100%;">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="1.1s" style="border-radius: 0;">
<img src="img/2.png" style="border-radius: 100%; width: 150px; height: 150px;">
</div>
</div>
<div class="col-sm">
<div class="single-specials text-center wow fadeInUp" data-wow-delay="1.3s" style="border-radius: 0;">
<img src="img/1.png" style="border-radius: 100%;">
</div>
</div>
</div>
</div>
I am using bootstrap4, if there is another decision without bootstrap, please, show me how.

Answer 1

I just make to demonstrate code for you at: https://codepen.io/tien-bui/pen/mamemO
So the basic ideas of Bootstrap is every row have 12 col, so if you want to display 5 item in 1 row you need to set the col prefix at 2. For example: target small screen col-sm-2, target large screen col-lg-2. And you need to target all the device to achieve the responsive, it will look like this:
<div class="col-lg-2 col-md-2 col-sm-6 col-6"></div>

Answer 2

You can use flex, set width to 18% for example - that little less than 20% , which can take 5 items and it will give you some space for margin.
Use media query for the second version and set flex-basis to 48%.
.cont{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.item{
flex-basis: 18%;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid black;
height: 50px;
margin: 5px;
}
#media all and (max-width: 1024px) {
.item {
flex-basis: 48%;
}
}
<div class="cont">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>