css - 如何在使用引导程序调整大小之前强制列堆叠？

Question

语境

我正在制作响应式马赛克，我决定使用表格，因为我可以控制它们在较小屏幕上的堆叠方式。

可能这不是最好的方法，但到目前为止它是有效的。

问题

下面是代码，基本上是两列，每列中有一个表。它们显示正常，但是当我调整屏幕大小直到第一个断点时，它会调整大小并且第一个表的第二列位于第二个表的第一列之后，如图所示。在堆叠两张桌子之前，它会再发生一次或两次。

HTML

 <div class="container">
    <div class="row">
        <div class="col-sm nopadding" style="background-color: #6EBCD2;">
            <img src="img/Cubierta_recetas.png">
        </div>
        <div class="col-sm nopadding" style="background-color: #EEDF4B;">
            <img src="img/Cubierta_foncep.png">
        </div>
    </div>
</div>

CSS

.table td, .table th {
    vertical-align: middle;
} 

你可以在这里看到它 https://jsfiddle.net/envm6920/1/

我想要的是？

我希望它们从第一个断点开始堆叠。

更新 由于代码比需要的多得多，我简化了事情，这样人们就不会被不相关的代码分心。详细地说，我消除了桌子。

使用 254x254 的图像，但我想这也不相关。

标签： csstwitter-bootstrap