Изменить столбцы с 6 на 4 на 2 в зависимости от размера экрана

Question

В настоящее время я использую Bootstrap 3.3.5 CSS на видеохостинге NSFW . На первой странице, если размер экрана имеет ширину 1200 пикселей и более, в 6 столбцах по 2 отображаются 12 видеороликов. Когда ширина экрана становится меньше 768 пикселей, эти 6 столбцов изменяются на 2 столбца, чтобы лучше соответствовать экрану.

Я хочу добавить CSS, где, если размер экрана меньше 1200 пикселей, но больше 768 пикселей, будут отображаться 4 столбца.

Ниже приведена ссылка на видео, показывающее, как все меняется в зависимости от размера экрана:

Это видео NSFW http://tinypic.com/r/fuosw3/9

Как вы можете видеть, по мере уменьшения размера экрана уменьшенные изображения уменьшаются, но остаются до 6 столбцов, вплоть до размера менее 768 пикселей и изменения в 2.

Какой CSS-код можно использовать для переключения на 4 столбца после разрешения менее 1200 пикселей?

Answer 1

Вы можете использовать свойство @media в css следующим образом:

Это будет применяться для экрана с шириной <1200px </p>

@media only screen and (max-width: 1200px) {
    <do your stuff>
}

Это будет применяться только для экранов с шириной> 768px

@media only screen and (min-width: 768px) {
        <do your stuff>
}