Максим Тимофеев

В том же хроме есть мобильная версия с выбором любого разрешения

Запускать последовательно через js.
Или как вариант с задержкой поиграться. То есть 2-я анимация имеет задержку равную циклу первой, а у первой после выполнения задержка равная длине всего цикла - первая. Тогда каждую отдельно циклим, а результат нужный.

https://jsfiddle.net/qLp6d2pp/1/

Все зависит от задачи и окружения. С col-offset - вариант, также есть class="pull-right"

Посмотрел body имеет размер viewport, что и ожидается при width:100%

Использовать кастомный скролл. Например: manos.malihu.gr/jquery-custom-content-scroller
И управлять им как заблагорассудится.

Потому что там вместо пробела - неразрывный пробел  

допустим у body 3 класса может быть
red, green, blue
есть три шапки

<div class='visible-red'></div>
<div class='visible-green'></div>
<div class='visible-blue'></div>

и css:

.visible-red, .visible-green, .visible-blue {display:none;}
.red .visible-red {display:block;}
.green .visible-green {display:block;}
.blue .visible-blue {display:block;}