Как вставить значения в конкретные места?

Question

[Andrej Sharapov]

Привет всем.
Не могу понять, куда поставить массив each num in [1, 2, 3, 4, 5, 6, 7, 8], чтобы значения попадали последовательно в каждый блок.
Ставил в разные места, получается либо так как в примере (должно быть 8 блоков сcol-md-3) , либо в каждом col-md-3 выводится по 8 картинок с порядковым data-id.


Нужно сделать так, чтобы код выглядел так:

<div class="container">
  <div class="row flex-wrap bg-light sticky-top m-auto dots">
    <div class="col-md-3">     
      <div class="dot">
        <img src="" alt="" data-id="1"/>
        <p>text</p>
      </div>
    </div>
    <div class="col-md-3">     
      <div class="dot">
        <img src="" alt="" data-id="2"/>
        <p>text</p>
      </div>
    </div>
    <div class="col-md-3">     
      <div class="dot">
        <img src="" alt="" data-id="3"/>
        <p>text</p>
      </div>
    </div>
...
  </div>
</div>

Answer 1

[yarnstart]

https://codepen.io/anon/pen/oVgvMa так ?

Comments

[Andrej Sharapov]

Блин, да. Спасибо)
Перехимичил я немного.

Answer 2

[0xD34F]

.container
  .row.flex-wrap.bg-light.sticky-top.m-auto.dots
    - for (var x = 1; x <= 8; x++)
      .col-md-3      
        .dot
          img(src="" alt="" data-id=x)
          p text