I'm currently working on implementing a voting system similar to that of Stack Overflow. However, I'm facing an issue with displaying the arrows on smaller screens. I want the arrows to be positioned next to the text, just like on StackOverflow.
On smaller screens, the arrows appear on two separate lines, which you can see in this screenshot
Here's what I have tried so far:
<div class="row">
<div class="col-md-2" style="font-size: 1em; color: #606060;">
<span class="fa fa-caret-up"></span>
<span>12</span>
<span class="fa fa-caret-down"></span>
</div>
<div class="col-md-10">
<h3>Column</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="fa fa-caret-up col-md-12"></span>
<span class="col-md-12">12</span>
<!-- Number goes here -->
<span class="fa fa-caret-down col-md-12"></span>
</div>
<div class="col-xs-11">
<h3>Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>