无法使用 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">