Bootstrap thumbnail shown in Tab and Desktop

Question

I use bootstrap 3 to built my website, as well as view in mobile devices such as phone and iPad, I have bootstrap thumbnail to loop my products, but it's looks weird in IPad vertical or horizonal view, all thumbnail is looks narrow and stretched vertically, please view screen shot, I don't really get to understand on this part <div class="col-sm-6 col-sm-3">, can someone please help?

<div class="row">

    <div class="col-sm-9" role="main">
        <div class="bs-docs-section">

        <div class="row">

                    //loop products from db

                    <div class="col-sm-6 col-sm-3">
                        <div class="thumbnail">
                            <img alt="170x200" data-src="holder.js/170x200" style="width: 170px; height: 200px;" src="">
                            <div class="caption">
                                <h4>Product Name</h4>
                                <p>Description</p>
                                <p>
                                <a class="btn btn-primary" role="button" href="#">Button</a>
                                </p>
                            </div>
                        </div>
                    </div>

                   // and so on

        </div>

        </div>
    </div>

    <div class="col-lg-3" role="complementary">
    submenu
    </div>

</div>

Answer 1

There is no reason to use col-sm-6 col-sm-3 together. You can use <div class="col-xs-6 col-md-3"> to go get 4 cols on wider devices, and 2 cols on smaller devices.

http://www.bootply.com/118669