Creating dynamic angular 8 components and html element and rearranging them

I have the following problem. I have an array with angular 8 component names and html elements. Currently it is creating the angular 8 components and the html elements but does not arrange them like they are sorted in the array.
This is my code:

for (var i = 0; i < res.length; i++) {
            var val = res[i];
            if (val.value.Type) {
                //Getting the factory for the component
                const factories = Array.from(this.resolver['_factories'].keys());
                const factoryClass = <Type<any>>factories.find((x: any) => x.name === val.editor.alias);

                const factory = this.resolver.resolveComponentFactory(factoryClass);
                //Creating the component
                this.Container.createComponent(factory);
            } else {
                this.$Element.append(val.value);
            }
}

My DOM looks the following

The angular components always get inserted directly after the .content div. I already tried using Container.insert but it does not work either.

Source: New feed
Source Url Creating dynamic angular 8 components and html element and rearranging them