Переместить div ниже другого div на определенной ширине экрана

Question

У меня есть мобильный сайт с 4 баннерами, которые появляются рядом. Когда я добираюсь до определенной ширины экрана, я хочу, чтобы 2 из них опустились ниже другого. Часть проблемы заключается в том, что я использовал width: 24.96%, чтобы получить правильную общую ширину всех 4 div, чтобы соответствовать телу.

CSS

.small_banners .banner_block { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    width: 24.96%; } 

.small_banners { 
    float: left; 
    clear: both; 
    width: 100%; 
    margin: 0 0 15px; } 

HTML

<div class="small_banners"> 
    <div class="banner_block"> 
     <div> 
     Content 
     </div> 
    </div> 
    <div class="banner_block"> 
     <div> 
     2nd piece of content 
     </div> 
    </div> 
    <div class="banner_block"> 
     <div> 
     3rd piece of content 
     </div> 
    </div> 
    <div class="banner_block"> 
     <div> 
     The 4th piece of content 
     </div> 
    </div> 
    </div> 

Когда экран достигает 958px Я хочу третьего и 4-дивы упасть ниже 1-го и 2-го, с помощью простого запроса средств массовой информации: @media all and (max-width: 958px) {

Answer 1

это должно работать.

@media (max-width: 958px) { 
     .small_banners .banner_block{ 
      width:50% !important; 
     } 
    } 

Answer 2

Метод Kishan действительно работает, если выполняется правильно! Вот скрипка, которая иллюстрирует использование свойства max-width для изменения ширины элементов 4 .banner_block в зависимости от ширины экрана.

https://jsfiddle.net/evc670st/1/

Примечание элементы с классом banner_block использования display:block и float:left укладывать горизонтально. Если вы не хотите использовать float эти элементы, вы можете использовать display: inline-block, но убедитесь, что между вашей разметкой html нет пробелов.

Источник: https://css-tricks.com/fighting-the-space-between-inline-block-elements/