Блог

У меня есть сгенерированный канал 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;
}
}