quiplunar

Нашли кнопку, сохранили ссылку.
Запустили цикл. Появилась переменная i = 0;
На клик по кнопке повесили функцию, которая КОГДА КЛИКНУТ на кнопку возьмет переменную i и выведет в консоль.
Цикл не закончился, переменная i = 1;
На клик по кнопке повесили ЕЩЕ такую же функцию.
Цикл не закончился, переменная i = 2;
На клик по кнопке повесили ЕЩЕ такую же функцию.
Цикл продолжается, но теперь i = 3, условие цикла дает false, цикл прекратился, но i = 3.
По кнопке кликнули....
Запустилась функция номер раз: ищет переменную i, находит, а там 3 -> в консоль ее.
Запустилась функция номер два: ищет переменную i, находит, а там 3 -> в консоль ее.
Запустилась функция номер три: ищет переменную i, находит, а там 3 -> в консоль ее.
ИТОГО: в консоли три тройки.

Нус, скажем, ты можешь взять JS, посчитать количество блоков (n), которые на данном вьюпорте вмещаются в строки и повтыкать баннер в подходящие тебе условия n+1 с параметрами, которые выстроят его на всю ширину.

С JS ты можешь нагородить проверок, повесить onresize для перерасчета, но легче, пожалуй, будет на CSS набрать, как Макс +- описал.

Самый простой вариант задать в медиа-запросах order для блоков, при верстке с флексбоксами

.block_container{
    display: flex;
    flex-flow: row wrap;
}
/*
[][]
[   ]
[][]
[   ]
*/
.block-1, .block-2{ order: 1}
.banner-1{ order: 2}
.block-3, .block-4{ order: 3}
.banner-2{ order: 4}
/*...*/

/*
[][][]
[     ]
[][][]
[     ]
*/
@media (min-width: 768px){
    .block-1, .block-2, .block-3{ order: 1}
    .banner-1{ order: 2}
    .block-4, .block-5, .block-6{ order: 3}
    .banner-2{ order: 4}
/*...*/
}
/*...*/

Посмотрите на w или t серию Lenovo. Очень достойные и живут уже много лет

Dell xps 13/15

ng g это Schematics, он довольно тяжелый для освоения.
Скаффолдер вам нужен, yeoman какой нибудь или plop