响应对齐图像

Question

我的主题使用Bootstrap 2.3 现在我有3个图像彼此相邻。 使用我的代码很好地对齐。

但是当屏幕宽度变小时，它们也会聚在一起。 我怎么能让他们分成3件？

HTML：

    <div class="sliderblock">
<!--img 1-->
    <div class="sliderblock-img">
    <div class="slider-wrap" style="width: 100%;">
    <div id="slider_1419038131_content" class="slider-wrap">
    <img title="Links" src="http://server.net//media/custom/advancedslider/resized/slide-54954c4197b1a-jpg/535X400.jpg" alt="Links"/>
    </div>
    </div>
    <div class="clear"></div>
    </div>
<!--img 2-->
    <div class="sliderblock-img">    
    <div class="slider-wrap" style="width: 100%;">
    <div id="slider_1419038265_content" class="slider-wrap">
    <img title="midden" src="http://server.net//media/custom/advancedslider/resized/slide-54954cc24a23a-jpg/535X400.jpg" alt="midden"/>
    </div>
    </div>
    <div class="clear"></div>
    </div>
<!--img 3-->
    <div class="sliderblock-img">    
    <div class="slider-wrap" style="width: 100%;">
    <div id="slider_1419038305_content" class="slider-wrap">
    <img title="rechts" src="http://server.net//media/custom/advancedslider/resized/slide-54954d0eb9953-jpg/535X400.jpg" alt="rechts"/>
                                        </div>
        </div>
    <div class="clear"></div>

    </div>
    </div>

的CSS：

.sliderblock{
    position: relative;
    z-index: 1;
    display: table;
    height: auto;
    overflow: hidden;
    width: 100%;}
.sliderblock-img{ display: table-cell;
    overflow: hidden;
    position: relative; max-width:100% !important;
max-height:100% !important;}
.sliderblock-img .slider-wrap img{width: 100%; max-height: 100%;}