jquery - 使用背景图像制作链接列表 1 行桌面，同一设备上的两列

Question

我有一个生成的 Instagram 提要links。我想保留1 column在桌面和其他设备（平板电脑、桌面）上2 column。我可以使用bootstrap，问题是html结构是之后生成的，所以我不能row在两个项目之间做一个两列（只显示第一个项目结构）。你可以在这里看到一个活生生的例子。现在它在移动设备上以这种方式显示但无序：

HTML结构：

<div class="container-fluid mx-auto insta-feed">
      <h2>INSTAGRAM</h2>
    <div id="instafeed">
    </div>
</div>

JS

    var userFeed = new Instafeed({
        get: 'user',
        userId: '5388417298',
        accessToken: '5388417298.1677ed0.e3460b92c6f445c98d18f18635f740cf',
  template: '<a href="{{link}}" class="in-img" target="_blank" id="{{id}}" style="background-image: url({{image}});"></a>',
  sortBy: 'most-recent',
  limit: 4,
resolution: 'standard_resolution',

    });
    userFeed.run();

CSS

#instafeed a:last-child {
margin-right: 0px;
}
#instafeed {
text-align: center;

}
#instafeed a {
height: 210px;
margin-top: 10px;
width: 210px;
display: inline-block;
margin-right: 40px;
object-fit: cover;
background-size: cover;

}

@media screen and (max-width: 576px) {
#instafeed a {
    height: 120px;
    width: 120px;
    margin-right: 20px;
}
}

标签： jqueryhtmlcss