如何从QueryList获取元素并将其插入模板？

Question

@Component({
  selector: 'my-app',
  template: `
    <alert type="success"></alert>
    <alert type="danger"></alert>
    <alert type="info"></alert>
  `,
})
export class App {
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>

  ngAfterViewInit() {
    this.alerts.forEach(alertInstance => console.log(alertInstance));
  }
}

如您所见，我通过类型AlertComponent来显示DOM元素列表。

如何从此QueryList中获取前一个元素并显示在模板中，然后从列表中获取第一个元素并插入pre-last模板中？

结果，我需要获取此结构DOM：

<alert type="danger">
   <alert type="success"></alert>
</alert>

如何在DOM中重新排序this.alerts？