html - 以特定屏幕宽度将一个 div 移动到另一个 div 下方

Question

我有一个移动网站，其中有 4 个并排显示的横幅。当我达到某个屏幕宽度时，我希望其中的 2 个低于另外 2 个。部分问题是我使用了 width: 24.96% 来获得所有 4 个的正确总宽度适合 body 的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 时，我希望第 3 个和第 4 个 div 低于第一个和第 2 个，使用一个简单的媒体查询:@media all and (max-width: 958px) {

Answer 1

这应该有效。

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