I want a different number of columns in gallery for mobile vs desktop view

So I currently am using a Grid: Masonry with 3 columns, I like how that looks on Desktop but I want just one column on Mobile view. Is this possible to achieve?

You can use this code to Website > Website Tools > Custom CSS

/* Masonry to grid mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
    figure.gallery-masonry-item img {
        width: 100% !important;
    }
}