<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class=" m-5 d-flex flex-md-row align-items-start align-items-stretch hidden-print">
<div class="d-flex justify-content-start col-6">
<a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
<button type="button" class="btn btn-secondary btn-navigation mr-2 bg-gray-900 text-muted border-0 rounded-0">Previous
<br>
<a href="#" class="wordwrap">The title of the previous post</a>
</button>
</div>
<div class="d-flex justify-content-end ml-auto col-6">
<button type="button" class="btn btn-secondary btn-navigation bg-gray-900 text-muted border-0 rounded-0">Next
<br>
<a href="#" class="wordwrap">The title of the next post. It might be long. Very very long</a>
</button>
<a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
