Конкретный порядок начальной загрузки

Question

У меня такая раскладка на меньших экранах (H = Заголовок, Q = Вопрос):

H1
Q1
H2
Q2

На больших экранах я хочу изменить макет на:

H1 H2
Q1 Q2

Это то, что я пробовал до сих пор.

<div class="container-fluid">
  <div class="row justify-content-center">
    <ng-container *ngFor="let count of [0,1,2,3,4,5,6,7]; let i = index;">
        <div class="col-lg-6" style="background-color: red;">
          Header {{ i + 1 }}
        </div>
        <div class="col-lg-6" style="background-color: green;">
          Question {{ i + 1 }}
        </div>
    </ng-container>
  </div>
</div>

Полагаю, неплохо было бы начать с класса порядка начальной загрузки. Я использую Angular 2 и цикл *ngFor, потому что я не знаю точное количество вопросов во время выполнения.