advanced columns – mobile responsive 3 column to 2 column

I am using a 3 column layout using the advanced columns block. I would like it to break down to 2 columns for the widths between 1000px and 1200px (the reason to do this is that I use a sidebar, and between these two widths, the 3 columns would look much better as a 2 column layout instead of a 3 column layout. But, then below 1000px, the sidebar gets eliminated in the theme so then it breaks down fine once the sidebar gets eliminated.

I want to use a media query to force a 2 column display betweem 1000-1200px. Is that possible? I would imagine something that resembles the code below. (but I have no idea what actual css to use)

`@media (min-width: 1000px) and (max-width: 1199px) {

.gb-layout-columns-3>.gb-layout-column-wrap.gb-is-responsive-column {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas:
“col1”
“col2”
“col3”;
}

}`