<div *ngIf="playerStats">
  <div class="m-b-1">
    <code>
      {{ player?.name || 'Player' }} has played
      <agot-count [count]="playerStats?.overall?.played"></agot-count>,
      won
      <agot-count [count]="playerStats?.overall?.won"></agot-count>,
      drawn
      <agot-count [count]="playerStats?.overall?.drawn"></agot-count>,
      and lost
      <agot-count [count]="playerStats?.overall?.lost"></agot-count>
    </code>
  </div>

  <agot-player-stats-table title="Playing As" [playerStatsSet]="playerStats.as"></agot-player-stats-table>
  <agot-player-stats-table title="Playing Versus" [playerStatsSet]="playerStats.vs"></agot-player-stats-table>
</div>

<div *ngIf="playerStats">
  <div class="m-b-1">
    <code>
      {{ player?.name || 'Player' }} has played
      <agot-count [count]="playerStats?.overall?.played"></agot-count>,
      won
      <agot-count [count]="playerStats?.overall?.won"></agot-count>,
      drawn
      <agot-count [count]="playerStats?.overall?.drawn"></agot-count>,
      and lost
      <agot-count [count]="playerStats?.overall?.lost"></agot-count>
    </code>
  </div>

  <div class="row">
    <agot-player-stats-table title="Playing As" [playerStatsSet]="playerStats.as"
                             class="col-lg-6 col-xs-12"></agot-player-stats-table>
    <agot-player-stats-table title="Playing Versus" [playerStatsSet]="playerStats.vs"
                             class="col-lg-6 col-xs-12"></agot-player-stats-table>
  </div>
</div>

Put the two tables into cols on large and above
Put the two tables into cols on large and above
