css - 在小屏幕上保持行和列相同

我在背景图像的6行和2列中有3个图像。如何在小屏幕上保持相同的布局？

在小屏幕上的自适应设计中，6图像将按预期垂直排列在另一个下方，但这不是我所需要的。我需要找到一种方法来缩小较小屏幕的6图像，同时将它们保留在背景图像上相同的2行和3列中。

我可以发布代码，但是我使用的是Python framework，而bootstrap framework使用的是CSS，所以如果我发布所有代码，可能会使事情看起来更复杂。我只是在寻找一个简单的解决方案，或者可能是一个引导解决方案（如果有）。

最佳答案

这应该做您想要的：

http://www.bootply.com/YteNmihNaO

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
    <div class="col-xs-4">
      <img class="img-responsive" alt="" src="http://d.fastcompany.net/multisite_files/fastcompany/poster/2014/08/3034115-poster-p-1-the-monkey-selfie-question.jpg">
    </div>
  </div>
</div>