我在将桌面ui适应移动设备时遇到问题。当我从桌面设置col-md值时，组件会根据col-md的值调整大小，但是当我向这些相同的组件添加col-sm属性时，移动端将不会发生任何变化。

我正在使用Bootstrap 3

图片会更好地说明。

码

<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>

我不太擅长html页面。谢谢。