Adding columns dynamically in one row

Ionic Framework ionic-v3
1

hi , I am trying to display images in one row but I want it to be dynamic where if the screen size changes its does not wrap and display them below but instead displaying a button that redirects to another page… Im not sure how to do this

so far , html:

<ion-row align-items-center>
        <ion-col col-auto>
            <img src="assets/images/image.png" />
        </ion-col>
        <ion-col col-auto>
            <img src="assets/images/image.png" />               
        </ion-col>
        <ion-col col-auto>
            <img src="assets/images/image.png" />               
        </ion-col>
        <ion-col col-auto>
            <img src="assets/images/image.png" />               
        </ion-col>
        <ion-col col-auto>
            <img src="assets/images/image.png" />               
        </ion-col>
        <ion-col col-auto>
            <img src="assets/images/image.png" />               
        </ion-col>
    </ion-row>

image

if screen orientation changes/ smaller screen device (not the desired effect):

image

the desired effect supposed to be like this:

image

I know that I have to create the columns in .ts side but not sure where to start and how calculate the screen width size… or maybe there is a better way to do it… any suggestions ,thanx