Bootstrap 3搭配Rain/Tpl时断点失效 Instagram feed列无法堆叠

栅格列不堆叠的核心原因是自定义CSS破坏了Bootstrap原生Row容器的flex逻辑：
Bootstrap的.row类本身已经是flex容器，默认自带flex-wrap: wrap属性，正是这个属性保证小屏下列宽占满整行时可以自动换行堆叠。你给id为instagram-feed的Row容器额外写的样式里，手动重新声明了display: flex，但没配置换行规则，还加了和flex布局冲突的float: left属性，直接覆盖了原生的换行配置，导致所有子列会一直强制并排显示，永远不会换行。
网站其他区块的栅格正常，是因为那些Row容器没有被自定义CSS覆盖规则，原生Bootstrap逻辑可以正常运行。

• 优先推荐直接删掉#instagram-feed里的冲突属性，不要随意修改Bootstrap原生栅格容器的核心布局规则，调整列间距优先用Bootstrap自带的间距工具类即可。
• 如果要保留你写的justify-content: space-around对齐效果，只需要给自定义样式补上flex-wrap: wrap，删掉冲突的浮动属性即可，修改后的代码如下：

#instagram-feed {
  width: 100%;
  /* 移除冲突的 float: left; 属性 */
  display: flex;
  flex-wrap: wrap; /* 核心修复：允许flex子项换行 */
  justify-content: space-around;
}

• 额外修复提示：你目前用背景图实现图片展示，但<a>标签没有设置块级属性和宽高，会出现高度塌陷看不到图片的问题，可以补上这段样式：

.instagram-image a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* 适配Instagram正方形图片比例 */
  background-size: cover;
  background-position: center;
}

内容的提问来源于stack exchange，提问作者Fernando Pinto