Col-Sm Has No Effect On Page - html

Question

Im having problem while adapting desktop ui to mobile. When i set col-md values from desktop, components resize according to value of col-md but when i add col-sm attribute to these same component there arent any changes in mobile side.
I am using bootstrap 3 by the way
Images will explain better.
CODE
<div id='main' class="container" ng-controller="searchController">
<div class="row" id='tags'>
<div class="col-md-3 col-sm-2" style="display:inline-block">
<h4>Images</h4>
</div>
<div class="col-md-3 col-sm-2" style="display:inline-block">
<h4>Name</h4>
</div>
<div class="col-md-2 col-sm-2" style="display:inline-block">
<h4>Type</h4>
</div>
<div class="col-md-2 col-sm-2" style="display:inline-block">
<h4>Price</h4>
</div>
<div class="col-md-1 col-sm-1" style="display:inline-block">
<h4>Cart</h4>
</div>
<div class="col-md-1 col-sm-1" style="display:inline-block">
<h4>Wishlist</h4>
</div>
</div>
<hr>
<div ng-repeat="result in results" ng-controller="buttonController">
<div class="row">
<div id='image' class="col-md-3 col-sm-3">
<img ng-src="{{result.image}}" style="max-width: 100%;max-height: 100%;">
</div>
<div class="col-md-3 col-sm-1">
<a ng-href='/product/{{result.id}}'>
<h3>{{result.name}}</h3>
</a>
</div>
<div class="col-md-2 col-sm-2" style="display:inline-block">
<h5 style="margin-top:30px">{{result.category}}</h5>
</div>
<div class="col-md-2 col-sm-2">
<h5 style="margin-top:30px">{{result.price}} {{result.currency}}</h5>
</div>
<div class="col-md-1 col-sm-1" style="display:inline-block">
<button ng-click='addBasket(result.id)' type="button" class="btn btn-default btn-sm" style="margin-top:30px">
<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</div>
<div class="col-md-1 col-sm-1" style="display:inline-block">
<button ng-click='addWishlist(result.id)' type="button" class="btn btn-default btn-sm" style="margin-top:30px">
<span class="glyphicon glyphicon-star"></span>
</button>
</div>
</div>
<div class="col-md-6 alert alert-info ng-cloak" style="float: none; margin: 0 auto;" ng-show="basketAlert">
<strong>Confirm!</strong> This product has been added to your basket.
</div>
<div class="col-md-6 alert alert-info ng-cloak" style="float: none; margin: 0 auto;" ng-show="wishlistAlert">
<strong>Confirm!</strong> This product has been added to your wishlist.
</div>
<div class="col-md-6 alert alert-warning ng-cloak" style="float: none; margin: 0 auto;" ng-show="alreadyInBasketAlert">
<strong>Hey!</strong> This product is already in your basket.
</div>
<div class="col-md-6 alert alert-warning ng-cloak" style="float: none; margin: 0 auto;" ng-show="alreadyInWishlistAlert">
<strong>Hey!</strong> This product is already in your wishlist.
</div>
<hr>
</div>
Im not so good at html pages. Thanks.

Answer 1

From what I'm seeing in the Bootstrap 3 docs, you'll want to use col-xs since your targeting mobile devices ( width < 768px ). The HTML would look like this. I replaced col-sm with col-xs. :
<div id='main' class="container" ng-controller="searchController">
<div class="row" id='tags'>
<div class="col-md-3 col-xs-2" style="display:inline-block">
<h4>Images</h4>
</div>
<div class="col-md-3 col-xs-2" style="display:inline-block">
<h4>Name</h4>
</div>
<div class="col-md-2 col-xs-2" style="display:inline-block">
<h4>Type</h4>
</div>
<div class="col-md-2 col-xs-2" style="display:inline-block">
<h4>Price</h4>
</div>
<div class="col-md-1 col-xs-1" style="display:inline-block">
<h4>Cart</h4>
</div>
<div class="col-md-1 col-xs-1" style="display:inline-block">
<h4>Wishlist</h4>
</div>
</div>
<hr>
<div ng-repeat="result in results" ng-controller="buttonController">
<div class="row">
<div id='image' class="col-md-3 col-xs-3">
<img ng-src="{{result.image}}" style="max-width: 100%;max-height: 100%;">
</div>
<div class="col-md-3 col-xs-1">
<a ng-href='/product/{{result.id}}'>
<h3>{{result.name}}</h3>
</a>
</div>
<div class="col-md-2 col-sm-2" style="display:inline-block">
<h5 style="margin-top:30px">{{result.category}}</h5>
</div>
<div class="col-md-2 col-sm-2">
<h5 style="margin-top:30px">{{result.price}} {{result.currency}}</h5>
</div>
<div class="col-md-1 col-xs-1" style="display:inline-block">
<button ng-click='addBasket(result.id)' type="button" class="btn btn-default btn-sm" style="margin-top:30px">
<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</div>
<div class="col-md-1 col-xs-1" style="display:inline-block">
<button ng-click='addWishlist(result.id)' type="button" class="btn btn-default btn-sm" style="margin-top:30px">
<span class="glyphicon glyphicon-star"></span>
</button>
</div>
</div>
<div class="col-md-6 alert alert-info ng-cloak" style="float: none; margin: 0 auto;" ng-show="basketAlert">
<strong>Confirm!</strong> This product has been added to your basket.
</div>
<div class="col-md-6 alert alert-info ng-cloak" style="float: none; margin: 0 auto;" ng-show="wishlistAlert">
<strong>Confirm!</strong> This product has been added to your wishlist.
</div>
<div class="col-md-6 alert alert-warning ng-cloak" style="float: none; margin: 0 auto;" ng-show="alreadyInBasketAlert">
<strong>Hey!</strong> This product is already in your basket.
</div>
<div class="col-md-6 alert alert-warning ng-cloak" style="float: none; margin: 0 auto;" ng-show="alreadyInWishlistAlert">
<strong>Hey!</strong> This product is already in your wishlist.
</div>
<hr>
</div>