When attempting to mix ltr and rtl content within a single paragraph, the entire paragraph aligns based on the rtl direction. This means that if the first span is rtl and the second is ltr, the second span will appear before the first one.
In the sample code below, you can see that in the first list group, the time appears first when it should actually appear second as shown in the next group.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>List Group With Custom Content</h2>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text"><span>الفاتحہ.</span><span>0:11</span>
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text"><span>Fatiha</span><span>0:11</span>
</p>
</a>
</div>
</div>
</body>
</html>