Bootstrap 3: how to 7 images in 12 columns - html

Question

I just joined StackOverflow since I recently got back to webdesign and I'm learning Bootstrap. I'm designing my own Website and I'm already facing an issue that I can't resolve myself. I want to achieve the following: Workflow I also would like to make the arrows disappear when the screen size gets so small that make the icons look in a vertical way instead of the regular horizontal way (hope I explained it correctly)
I already tried some things and failed:
1- Instead of using each icon/arrow in a separate img file, I saved them in a unique img file and used the css "img-responsive" class. It looked pretty good on desktop but text looked too small on mobile.
2- After that I got back to trying to make it work with each img in a separate file, I found a post here about getting 7 equal columns and it seems to do what I need but I can't get the images to be close enough as I want to, tried several ways to remove the gutter between the columns and nothing, I think that it might be cause to get the 7 equal columns, the columns itself get a fixed width, not allowing me to get rid of their padding/margin.
Here's what I've got so far:
HTML:
<div id="whyus" class="container-fluid text-center">
<h2>Why Us?</h2>
<div class="row seven-cols">
<div class="col-md-1 no-padding">
<img src="img/Heart_icon.png">
<h4>Passion</h4>
</div>
<div class="col-md-1 no-padding">
<img src="img/Arrow1.png" class="arrow1">
</div>
<div class="col-md-1 no-padding">
<img src="img/Idea_icon.png">
<h4>Ideas</h4>
</div>
<div class="col-md-1 no-padding">
<img src="img/Arrow2.png" class="arrow2">
</div>
<div class="col-md-1 no-padding">
<img src="img/Brain_icon.png">
<h4>Work</h4>
</div>
<div class="col-md-1 no-padding">
<img src="img/Arrow1.png" class="arrow1">
</div>
<div class="col-md-1 no-padding">
<img src="img/Like_icon.png">
<h4>Amazing Results</h4>
</div>
</div>
CSS:
.arrow1 {
padding-top: 75px;
}
#media only screen and (max-width: 768px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
#media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
#media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
And this is how it's looking so far: Website Preview
Sorry for not uploading the code into the snippet, tried but couldn't get it to work so hope you guys get the idea anyway... BIG THANKS!
EDIT:
-ARROWS: arrow1.png arrow2.png (modified the arrows in the code cause I just realized that arrow1 and arrow3 are the same one... I also want to mention that I gave them a class in order to add some padding to them, so they can look like I showed at the beginning of the post in Workflow)

Answer 1

How about this?
Instead of calculating and allocating each item a width, using flex display on seven-cols and flex:1 on the seven-cols divs to make it flexibly grow and shrink.
When the max-width reaches a certain width threshold, change the flex-direction to column and hide the arrows.
.arrow1 {
padding-top: 75px;
}
#media only screen and (max-width: 768px) {
.seven-cols {
display: flex;
flex-direction: column;
}
.arrow1,
.arrow2 {
display:none;
}
}
#media (min-width: 769px) {
.seven-cols {
display: flex;
justify-content: center;
}
.seven-cols>* {
flex: 1;
max-width: 14%;
}
.no-padding .arrow1,
.no-padding .arrow2 {
width: 80%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="whyus" class="container-fluid text-center">
<h2>Why Us?</h2>
<div class="row seven-cols">
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Passion</h4>
</div>
<div class="no-padding">
<img src="https://i.stack.imgur.com/QqJno.png" class="arrow1">
</div>
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Ideas</h4>
</div>
<div class="no-padding">
<img src="https://i.stack.imgur.com/17ox3.png" class="arrow2">
</div>
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Work</h4>
</div>
<div class="no-padding">
<img src="https://i.stack.imgur.com/QqJno.png" class="arrow1">
</div>
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Amazing Results</h4>
</div>
</div>
CSS: