Div bootstrap background position - html

Question

issue
I am having issues with this layout. I want to position a picture of an app right in the center of these boxes. it is important that the image is visible over the top and under the bottom of background for the sections with text. I have tried everything both as background and as normal image (position, z-index, etc.).
I am using bootstrap for col and row. I also needs this to look beautiful on mobile. I need design to look at attached picture, but with the picture in the middle in front of the background. Any suggestions?
Current code and CSS:
<center>
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
<div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
<div class="col-md-1 text-left"><img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon"></div>
<div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon"></div>
<div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
<div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
<div class="col-md-1 text-left"><img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon"></div>
<div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon"></div>
<div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
</section>
</div>
</center>
.appicon_white {
width: 60px;
height: 60px;
}
.appfeatures {
background: rgb(102,204,153);
background: linear-gradient(180deg, rgba(102,204,153,1) 0%, rgba(30,130,76,1) 100%);
opacity: 0.5;
}
.container_appfeatures {
width: 80%;
}
.margin50 {
margin-top: 75px;
margin-bottom: 75px;
width:100%;
height:100%;
background-image: url("../img/profile.png");
background-repeat: no-repeat;
background-position: center center;
padding-top:95px;
padding-bottom:95px;
}

Answer 1

Don't use col-md-offset-4 just col-md-4 and your must use <div class="row"> in every row. Here I updated your html code:
<center>
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
<div class="col-md-3 col-sm-3 text-right">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon">
</div>
<div class="col-md-4"> </div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon">
</div>
<div class="col-md-3 col-sm-3 text-left">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
</div>
<img src="https://path to your iphone image">
<div class="row">
<div class="col-md-3 col-sm-3 text-right">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon">
</div>
<div class="col-md-4"> </div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon">
</div>
<div class="col-md-3 col-sm-3 text-left">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
</div>
</div>
</section>
</div>
</center>
CSS code updated:
.appicon_white {
width: 40px;
height: 40px;
}
.appfeatures {
background: rgb(102, 204, 153);
background: linear-gradient(180deg, rgba(102, 204, 153, 1) 0%, rgba(30, 130, 76, 1) 100%);
opacity: 0.5;
margin: 170px 0;
position: relative;
}
.container_appfeatures {
width: 80%;
margin: 75px auto;
}
.margin50 {
width: 100%;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.margin50 img {
max-width: 250px;
width: 100%;
}
img.phone-middle {
position: absolute;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
Jsfiddle: https://jsfiddle.net/marksalvania/94uyLvp1/
then on your mobile/smaller view just add this on your media queries something like this:
.col-md-3 {
text-align:left;
font-size: 10px; /*just adjust this to your desired size*/
}
.col-md-1,
.margin50 {
display:none; /*this is just optional if you just want hide icons on mobile view. Much better if you will hide the phone image on mobile view for sleek and clean layout.*/
}
.your-other-styles {
/*add your other styles here*/
}