bootstrap 3 ipad issue - html

Question

I'm currently going through my site testing it at present mobile / desktop is fine, the issue I have is with ipad when viewing the search page on an ipad the tiles are squashed up against the left i.e 1 pic per row, ideally I would like to see two if not three in a row but I cannot get it to work as expected, the HTML mark up for the page is as follows:
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-5">
<div class="shop-filters" style="display: block;">
<form action="/search/members" method="post">
<div class="widget">
<h5 class="widget-title font-alt">Filter</h5>
</div>
Filter stuff goes here
</form>
</div>
</div>
#*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*#
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/1/new-to-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/mhcoeigrttdgemwjuig7" alt="Atkinson1988" />
</a>
<div class="footer">
<a href='/member/1/new-to-melbourne'>Atkinson1988</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, St kilda road<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/4/female-2-asian-male-tp'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/t4leodsoxa0h5zaqomt7" alt="Female2" />
</a>
<div class="footer">
<a href='/member/4/female-2-asian-male-tp'>Female2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Docklands<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
<span class="best-seller">Online</span>
</div>
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/j6xnf3lu2gffviv1qkw3" alt="Tester123" />
</a>
<div class="footer">
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>Tester123</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/2/i-am-a-female-from-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/hyssjfqilmyntk9gvi4r" alt="Female1" />
</a>
<div class="footer">
<a href='/member/2/i-am-a-female-from-melbourne'>Female1</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/3/male-2-lookin-for-male-training-partner'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="Male2" />
</a>
<div class="footer">
<a href='/member/3/male-2-lookin-for-male-training-partner'>Male2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Southbank<br /></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row text-center">
<div class="pagination-container"><ul class="pagination"><li class="active"><a>1</a></li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The above is rendered by doing the following withing MVC Razor view:
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-4">
<div class="shop-filters" style="display: block;">
#using (Html.BeginForm("Search", "Members", FormMethod.Post))
{
<div class="widget">
<h5 class="widget-title font-alt">My Filter</h5>
</div>
#Html.AntiForgeryToken()
}
</div>
</div>
#*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*#
<div class="col-lg-9 col-md-9 col-sm-8 ">
<div class="row">
#if (ViewBag.ListOfUsers.Count > 0)
{
foreach (var t in ViewBag.ListOfUsers)
{
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
#if (t.LoggedIn)
{
<span class="best-seller">Online</span>
}
</div>
<a href='#Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>
#if (!string.IsNullOrWhiteSpace(t.PhotoId))
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/#t.PhotoId" alt="#t.Username" />
}
else
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="#t.Username" />
}
</a>
<div class="footer">
<a href='#Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>#t.Username</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> #t.Location<br /></span>
</div>
</div>
</div>
}
<div class="clearfix"></div>
<div class="row text-center">
#Html.PagedListPager((IPagedList)ViewBag.ListOfUsers, page => Url.Action("Search", "Members", new { page }))
</div>
}
else
{
<div class="col-sm-8 col-sm-offset-2 text-center">
<p>
Sorry, we couldn't find anyone within the criteria you provided.
</p>
</div>
}
</div>
</div>
</div>
</div>
</div>
UPDATE
This is what it currently looks like using the above

Answer 1

My initial guess, without seeing a live demo, is that only one is being shown per row because of col-sm-6. As bootstrap has a 12 column layout if there is any padding or margin applied to the objects 6+6+padding is greater than 12 and will push it to the next row. My understanding is that there should be a "div.row" for each new row. Hope that helps.