Заполнители для настольных и мобильных просмотров

Для реализации есть довольно сложная задача, которая полностью нарушила мой разум. Может быть, кто-то посоветует, как сгенерировать алгоритм на основе следующего описания.

Задача

У меня есть один контейнер с блоками статической ширины, скажем 150px. Ширина контейнера для настольных устройств составляет 600px а для мобильных устройств - 450px. Это означает, что в настольной версии у меня есть 4 блока подряд, а в мобильной версии - 3 блока подряд. Чтобы заполнить все пробелы, оставшиеся в строке (если есть), мне нужно добавить заполнители, которые выглядят как другие блоки, но без содержимого и разного цвета. Количество добавленных заполнителей всегда должно быть одинаковым, но некоторые должны быть скрыты в настольной версии, а некоторые должны быть скрыты в мобильной версии. Мне нужно использовать CSS для скрытия и отображения заполнителей на разных экранах и JavaScript для добавления заполнителей при загрузке страницы.

Примеры

Рассмотрим следующую разметку для 5 блоков с содержимым и 3 заполнителей:

<section>
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>
    <article>Article 5</article>

    <span>Placeholder 1</span>
    <span class="mobile-hide">Placeholder 2</span>
    <span class="mobile-hide">Placeholder 3</span>
</section>

ДЕМО: http://jsfiddle.net/5qpsj/

Здесь у меня есть 1 базовый заполнитель и 2 заполнителя, которые скрыты на мобильных экранах. Однако, если количество блоков контента равно 4, комбинация заполнителей становится другой, отображая только 2 заполнителя, которые должны быть скрыты на экранах рабочего стола:

<section>
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>

    <span class="desktop-hide">Placeholder 1</span>
    <span class="desktop-hide">Placeholder 2</span>
</section>

ДЕМО: http://jsfiddle.net/5qpsj/1/

Я пробовал разное количество блоков контента и создал следующую таблицу возможных комбинаций:

---------------------------------------------------------------------
| Blocks | Placeholders | <no class> | .mobile-hide | .desktop-hide |
---------------------------------------------------------------------
|      0 |            4 |          3 |            1 |             0 |
|      1 |            3 |          2 |            1 |             0 |
|      2 |            2 |          1 |            1 |             0 |
|      3 |            1 |          0 |            1 |             0 |
|      4 |            2 |          0 |            0 |             2 |
|      5 |            3 |          1 |            2 |             0 |
|      6 |            2 |          0 |            2 |             0 |
|      7 |            3 |          0 |            1 |             2 |
|      8 |            1 |          0 |            0 |             1 |
|      9 |            3 |          0 |            3 |             0 |
|     10 |            2 |          2 |            0 |             0 |
|     11 |            1 |          1 |            0 |             0 |
|     12 |            0 |          0 |            0 |             0 |
|     13 |            3 |          2 |            1 |             0 |
|    ... |          ... |        ... |          ... |           ... |
---------------------------------------------------------------------

Начиная с 13 блоков комбинации остаются такими же, как для 1 блока, 2 блока и т.д. Лично я не вижу в этих числах никакого шаблона, что мешает мне написать соответствующий алгоритм для добавления заполнителей и установки необходимых классов при загрузке страницы.

Конечно, я мог бы жестко закодировать значения от 0 до 12 числа блоков или использовать подход, который проверяет ширину контейнера при изменении размера страницы и добавляет/удаляет необходимое количество заполнителей (выполняется плохо!), Но моя цель - создать код, который выполняет всю эту работу один раз при загрузке, а затем полагается только на CSS.

Итак, в основном, что-то вроде этого:

for (var i = 0; i < [number_of_placeholders]; i++) {
    var placeholder = document.createElement('span');
    if ([condition]) {
        placeholder.className = 'mobile-hide';
    }

    if ([condition]) {
        placeholder.className = 'desktop-hide';
    }

    section.appendChild(placeholder);
}

У тебя есть идеи?