Jquery 如何在引导中将一列堆叠在其他两列之上？

我对Bootstrap完全陌生（就像今天刚开始使用它一样）。我正在改造我的网站，使之与其他屏幕尺寸和设备兼容。今天我熟悉了网格系统。我基本上希望在我的网站上有三个栏目——一个是文本，一个是图片，一个是我嵌入的twitter页面。它们都在某一点上堆叠。当所有这些都堆积起来时，我希望twitter消失。我用这个jquery实现了这一点：

$(window).resize(function(){

    if(window.innerWidth<992){
        $("#pln").hide();//id for twitter
        $("#label").hide();
    }
    else{
    $("#pln").css("display", "block");
    $("#label").css("display", "initial");
    }

});

$（窗口）。调整大小（函数（）{
如果从提供的JSB中窗口（宽度），看起来问题只是中间行中的图像有明确的宽度>代码>属性，因此它们不能填充从推特行中剩余的整个空间。（这也适用于较大的屏幕尺寸）：

另外，不要使用jQuery进行样式设置（比如隐藏和显示Twitter模块）。相反，请查找并使用CSS媒体查询。CSS用于设置样式/jQuery主要用于行为。请尝试将它们分开。您正在向浏览器添加不必要的负载，而CSS几乎不需要任何负载。以下是一个查询示例，可以完成相同的任务：

@media (max-width: 992px) {
  #pln {
    display: none;
  }
}

关于您关于大小相似的图像的问题，我将使用一个解决方案。将每个图像包装在一个公共容器类中：

<div class="image-wrapper">
  <img src="someimage.jpg" />
</div>
<div class="image-wrapper">
  <img src="someimage.jpg" />
</div>
...

并确保图像的静态宽度和边框半径已删除。包装器应以相同的大小对图像进行框显。
如果我无法让twitter正常工作，我会这样做。在我的第二张图像中，我如何使twitter占据其所有空间的宽度？你能告诉我你在第二张图像中看到的分辨率是多少吗？来自该实例的代码是否反映在当前jsbin中？通过一个小测试，看起来Twitter插件决定了页面加载时的宽度。如果不调整大小就重新加载页面，那么对于当前维度来说，它看起来太小/太大。让我知道这是否有意义。我使用的是969x644。当时我设置了2个classes到col-sm-4，以便它在不同的时间堆叠。好的，明白了。因此，因为您希望这两列在小网格上占据容器的50%，您需要将该类更新为
col-sm-6
，因为这是12网格引导系统的一半。
col-sm-4
仅为容器总宽度的3/4。尝试更新它，然后我就可以了t应该可以工作（我刚才测试时使用jsbin）。同样，对于图像，我如何使它们具有相同的宽度和高度？因为它们都略有不同，我使用特定的宽度和高度使它们保持不变。我如何设置自己的尺寸，但让程序在缩小窗口时缩放它？
<div class="image-wrapper">
  <img src="someimage.jpg" />
</div>
<div class="image-wrapper">
  <img src="someimage.jpg" />
</div>
...

.image-wrapper {
  width: 94%;
  height: 0;
  padding-bottom: 62.107142857% /* this is the current aspect ratio of your images */
  overflow: hidden;
  border-radius: 20px;
}