Bootstrap 4: Make responsive Float class with button - html

Question

I've problem with responsiveness when i've stacking button with float class. i want all my buttons stick at the end of the content.
body {
background-color: #eeeeee;
}
.bg-a {
background-color: #bbb;
color: #fff;
padding: 3 6px;
margin: 0 5px;
}
#img-top1,
#img-top2,
#img-top3 {
border-radius: 0;
}
header .container .row div a.ss {
padding: 5px 35px 10px 35px;
}
#img-top1 {
border-radius: 0 0 20px 0;
}
#img-top3 {
border-radius: 0 0 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<img id="logo" src="images/logo.png" style="margin-top: 15px;">
</div>
<div class="col-sm-12 col-md-6" style="padding: 0;">
Primary link1
Primary link2
Primary link3
<br style="clear: both;"><br>
<h4 style="background-color: skyblue; clear: both;">
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-glide-g"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a>
</h4>
</div>
</div>
</div>
</header><br>
The button with id img-top is not responsive, meanwhile the icon button with the same class is responsive (maybe because of the small size). How can i make it responsive?
the example of web : RHT Academy