Setting gdColumn with responsive API has screen resize issues

[jcoronel94]

What is the expected behavior?
When using grid layout directives I should be able to use responsive API to change which column the content renders in based on screen width.

Example :
a grid layout with 4 columns width.
header header header header
side content content side
footer footer footer footer

<div gdAreas.gt-sm="header header header | side content side2 | footer footer footer" gdColumns.gt-sm="40px auto 40px"
    gdGap.gt-sm="15px" [ngStyle]="{'max-width': 'auto','padding.px': 15}"
    gdAreas=" header | side | content |side2 | footer " gdGap="1em" gdColumns="none">

<div gdColumn="1" gdColumn.gt-sm="2 / span 2" gdArea="header">
    <h1>
        My title 
     </h1>
</div>

//more content

</div>

On large screens header content should start on column 2 ; on small screens it should start one column 1

What is the current behavior?
This behavior works on first load assuming you load on a larger screen size, but if you resize the screen to below small (anything less than the gt-sm for example) then resize back to original size the header content will be in column 1 where it should be back in column 2.

What are the steps to reproduce?

I have a small example here. Refresh screen at full width, header will be in column 2. Then resize screen to smaller width, header will be column 1. This is as expected. When you resize to full width, the header starts in column 1, this should not occur
https://stackblitz.com/edit/angular-zxinpp

[CaerusKaru]

Collapsing this into #1059.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}