Footer Social icons won't align - html

Question

I am trying to arrange my Social icons so that they will be placed on the same level as some text on in the footer. I will provide a Photo of the footer I have so far as well as the html and css code I have made so far. I wanted to figure out if i need to put the social icons into another div so that I can control the position that way, or would i need to utilize position element here?
footer {
background: #212529;
color: white;
width: calc(100% - 80px);
margin-left: 80px;
margin-right: -15px;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #FA944B;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
}
/* Footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoFacebook:hover {
background-color: #3B5998;
}
.social-network a.icoLinkedin:hover {
background-color: #007bb7;
}
.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff;
}
.social-network a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD;
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
}
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-network a {
background-color: #F9F9F9;
}
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>ACTIVITÉS</h4>
<ul class="list-styled">
<li>
Rafting</li>
<li>Kayak</li>
<li>Parachute</li>
<li>Soufflerie</li>
<li>Saut élastique</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>INFORMATIONS</h4>
<ul class="list-unstyled">
<li>Mentions légales</li>
<li>À Propos de nous</li>
<li>CGV</li>
<li>CGU</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>OFFRES</h4>
<ul class="list-unstyled">
<li>Solo</li>
<li>Groupe</li>
<li>Famille</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>PARTENAIRES</h4>
<ul class="list-unstyled">
<li>Nos Partenaires</li>
<li>Devenir Partenaire</li>
</ul>
</div>
</div>
<div class="col-md-3">
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<h4>Suivez-Nous</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2018 - Company Name. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>

Answer 1

Add CSS to <h4>Suivez-Nous</h4> h4{ display:inline }"and change the order

Answer 2

You can add d-flex class to your .col-md-3 element and thus <h4> element and social icons will be in a row.
P.S. I have changed .col-md-3 to .col-md-6, cause in .col-md-3 icons start to wrap onto multiple lines
<div class="col-md-6 d-flex">
<h4>Suivez-Nous</h4>
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
Full code: https://jsfiddle.net/8pL49rs7/