Layout has wide rows when browser width is smaller

Question

here's my markup:

                <style>
                    a.item
                    {
                        border:1px solid #aaa;
                        background:#ddd;
                        padding:10px;
                        display:block;
                    }
                    span.price
                    {
                        display:block;
                        text-align:center;
                        background:#555;
                        color:white;
                    }
                </style>
                <div class="main">
                    <div class="row">
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

it looks fine - like this:

the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:

"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?

thanks

Answer 1

Include col-xs-6 next to col-md-6.

https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.

Answer 2

If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options