无法使用bootstrap进行块响应

Question

我想在手机屏幕上做出响应

   <div class="row well">
        <div class="col-sm-3 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
                        <div class="caption">
                             <h3>Plot 1</h3>

                            <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <a href="#">Electronic City</a>

                            </p>
                        </div>
                    </div>
                    <table class="table" style="padding: 0; margin: 0;">
                        <tbody>
                        <tr>
                            <td>Price</td>
                            <td>Rs. 1400000</td>
                        </tr>
                        <tr>
                            <td>Total Land</td>
                            <td>7 acres</td>
                        </tr>
                        <tr>
                            <td>Total Plots</td>
                            <td>154</td>
                        </tr>
                        <tr>
                            <td>Avaliable Plots</td>
                            <td>15</td>
                        </tr>
                    </tbody></table>
                    <div class="panel-body">
                        <input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
                    </div>
                </div>
            </div>


       <div class="col-sm-3 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
                        <div class="caption">
                             <h3>Plot 1</h3>

                            <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <a href="#">Electronic City</a>

                            </p>
                        </div>
                    </div>
                    <table class="table" style="padding: 0; margin: 0;">
                        <tbody>
                        <tr>
                            <td>Price</td>
                            <td>Rs. 1400000</td>
                        </tr>
                        <tr>
                            <td>Total Land</td>
                            <td>7 acres</td>
                        </tr>
                        <tr>
                            <td>Total Plots</td>
                            <td>154</td>
                        </tr>
                        <tr>
                            <td>Avaliable Plots</td>
                            <td>15</td>
                        </tr>
                    </tbody></table>
                    <div class="panel-body">
                        <input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
                    </div>
                </div>
            </div>

       <div class="col-sm-3 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
                        <div class="caption">
                             <h3>Plot 1</h3>

                            <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <a href="#">Electronic City</a>

                            </p>
                        </div>
                    </div>
                    <table class="table" style="padding: 0; margin: 0;">
                        <tbody>
                        <tr>
                            <td>Price</td>
                            <td>Rs. 1400000</td>
                        </tr>
                        <tr>
                            <td>Total Land</td>
                            <td>7 acres</td>
                        </tr>
                        <tr>
                            <td>Total Plots</td>
                            <td>154</td>
                        </tr>
                        <tr>
                            <td>Avaliable Plots</td>
                            <td>15</td>
                        </tr>
                    </tbody></table>
                    <div class="panel-body">
                        <input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
                    </div>
                </div>
            </div>

       <div class="col-sm-3 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
                        <div class="caption">
                             <h3>Plot 1</h3>

                            <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <a href="#">Electronic City</a>

                            </p>
                        </div>
                    </div>
                    <table class="table" style="padding: 0; margin: 0;">
                        <tbody>
                        <tr>
                            <td>Price</td>
                            <td>Rs. 1400000</td>
                        </tr>
                        <tr>
                            <td>Total Land</td>
                            <td>7 acres</td>
                        </tr>
                        <tr>
                            <td>Total Plots</td>
                            <td>154</td>
                        </tr>
                        <tr>
                            <td>Avaliable Plots</td>
                            <td>15</td>
                        </tr>
                    </tbody></table>
                    <div class="panel-body">
                        <input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
                    </div>
                </div>
            </div>

    </div>

在桌面上查看，这很好

在小屏幕上查看，设计正在压缩

我想连续显示单个情节记录，而不是如下所示的两个

如何在小屏幕中使其响应？

我正在使用bootstrap 3

Answer 1

col-xs-专门用于手机。而使col-xs-12成为全宽。

更新专栏

来自

<div class="col-sm-3">

到

<div class="col-xs-12 col-sm-3">