Bootstrap hidden function

Hi,
I added share buttons after posts with this code:

<h5 class="social_icons"><font color="#777777">Condividi l'articolo sul tuo social preferito</h5>
<style>
#social_icons > a {
	margin: 3px;
	width: 35px;
	text-align: center;
	border-radius: 50%;
	display: inline-block;
}
#social_icons > a.facebook {
	background: #3b5998;
}
#social_icons > a.twitter {
	background: #00aced;
}
#social_icons > a.googlePlus {
	background: #dd4b39;
}
#social_icons > a.linkedin {
	background: #0077B5;
}
#social_icons > a.whatsapp {
	background: #00E676;
}
#social_icons > a > i {
	color: #fff;
	font-size: 18px;
	line-height: 35px;
}
</style>
<div id="social_icons">

	<a class="facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>"">
		<i class='fa fa-facebook' aria-hidden='true'></i>
	</a>
	<a class="twitter" target="_blank" href="http://twitter.com/home?status=<?php echo urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>: <?php the_permalink(); ?>">
		<i class='fa fa-twitter' aria-hidden='true'></i>
	</a>
	<a class="googlePlus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>">
		<i class='fa fa-google-plus' aria-hidden='true'></i>
	</a>
	<a class="linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>&source=LinkedIn">
		<i class='fa fa-linkedin' aria-hidden='true'></i>
	</a>
<a class="whatsapp" target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>">
		<i class='fa fa-whatsapp' aria-hidden='true'></i>
	</a>

</div>

Now, I’ve to use bootstrap function to show whatsapp button only in mobile devices. How can I do it?