Hi There,
I was hoping that someone might be able to help me as I am really stuck on a bootstrap display issue.

I am working on a website that has a 1250px wide layout. This layout sits within a “wrapper” container that has a 40px margin to the width of the web browser. Within this “wrapper”

I would like to get a centred 4 by 4 grid of 275px wide containers to collapse nicely. By nicely I mean:

@media(min-width: 1200px) for all the 4 containers to be visible.
@media(max-width: 900px) wide then the grid would snap to 3 x 6
@media(max-width: 600px) wide then the grid would snap to 2 x 8
@media(max-width: 300px) then the grid would snap to 1 x 16

My grid item css is like this:

.container-gallery {
width: 275px;
padding: 5px, 5px;
float: left;
}

At the moment when the browser is resized my .container-gallery grid items work for the smallest of the two media queries but they overlap on top of each other between about 600px to until about 1150px wide.

Is there a way to to force this snap to happen using media queries?

Thanks to anyone who could point me in the right direction as I am a newbie with all of this bootstrap responsive thing.