Bootstrap Угловая адаптивная проблема дизайна

Question

Здесь, как отмечено красным на изображении, я не могу сделать так, чтобы эти числа отображались в виде сетки, но я могу сделать так, чтобы вышеуказанный раздел отображался в виде сетки

Вот код: -

     <div *ngIf="operation === 1">
        <div class="container"> 
           <h3 class="h2 text-center">Questions</h3>
           <div *ngIf="que.length > 0">
            <div class="col-md-6" *ngFor="let item of que; let i = index">
            <div class="card-block">
            <h4 class="card-title text-center">
            &nbsp;&nbsp;&nbsp;{{ item.firstNum }}
           </h4>
           <h4 class="card-title text-center">
           &nbsp;&nbsp;&nbsp;{{ item.secondNum }}
            </h4>
           <p class="  h4 text-center">&nbsp;&nbsp;&nbsp;_____</p>
          <!-- <button (click)="goBack()" [routerLink]="['']">go back</button> -->
           </div>
          </div>
         </div>
          </div>
          <div class="bg-success"> 
           <p class="h2 text-center"> Answers  </p>
             </div>
            <div class="app flex-row align-items-center">   
            <div class="container"> 
            <div class="card-deck row">
            <div class="col-md-2" > 
           <h4>{{ answer }}</h4> 
           </div> 
          </div>
        </div>
       </div>
      </div>