Currently I am using Bootstrap 3.3.5 CSS on a NSFW video hosting site. On the front page, if the screen size has a width of 1200px and greater, there are 12 videos displayed in 6 columns of 2. When the screen width gets below 768px, those 6 columns change into 2 columns to better fit the screen.
What I want to add is CSS where if the screen is smaller than 1200px but greater than 768px, 4 columns will display.
Below is a link to the video showing how everything changes based on screen size:
This video is NSFW http://tinypic.com/r/fuosw3/9
As you can see, as the screen gets smaller the thumbnails get smaller but it remains 6 columns all the way down to when the size is less than 768px and it changes into 2.
What CSS can I use to have it switch to 4 columns after going under 1200px?
You can use the the @media property of css as follow:
That will be applied for screen with width < 1200px
@media only screen and (max-width: 1200px) {
<do your stuff>
}
That will be applied only for screens with width > 768px
@media only screen and (min-width: 768px) {
<do your stuff>
}