How to insert values ​​in specific places?

Question

Pug

Hi all.
I can't figure out where to put the array each num in [1, 2, 3, 4, 5, 6, 7, 8]so that the values ​​fall sequentially into each block.
I put it in different places, it turns out either as in the example (there should be 8 blocks with col-md-3), or in each col-md-38 pictures with ordinal are displayed data-id.

You need to make the code look like this:

<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

https://codepen.io/anon/pen/oVgvMa right?