How do I use an ngif statement to change displayed media content depending on the screen size?

I am building my first website using bootstrap4 and have designed a 3x3 image gallery using the class "jumbotron". However, when the site is viewed on mobile the 3x3 is reduced to 1 column and vertically scrolling 9 images is not something I want. I want the images on mobile to be displayed in the "carousel" class (image slider) so the images can be viewed by simply swiping left and right.

I've tried to get my head aroung using ngif else to solve the problem but maybe its something i'm over thinking, but there's no change. I've also tried the css approach of display:none. This has resulted in either none of the images displayed or just the 3x3 across all devices. I've also tried getViewportSize() {}, but again it must be something I'm doing or pver thinking. It can't be this complicated to get the viewport size and either a) display images in the 3x3 jumbotron if the screen size is > than 768px - or b) display images using the slider if the screen size is <= to 768px.

Thanks.