在某个窗口宽度上，将4个未列出的列表（ul）设置为1

Question

我的网站上有活动页面。因为所有'li'都不是同一个维度，所以我把它们放在四个'ul'中并将它们向左浮动。

.DogadjajiLista{
    width:225px;
    margin-right:15px;
    position:relative;
    text-align:left;
    float:left;
}
.DogadjajiLista li{
    position:relative;
    list-style:none;
    width:225px;
    display:block;
    padding:0;
    margin-bottom:15px;
    overflow:visible;
    float:left;
    -moz-box-shadow: 2px 3px 2px #cecece;
    -webkit-box-shadow: 2px 3px 2px #cecece;
    box-shadow: 2px 3px 2px #cecece;
}

对于响应式设计，我将它们放在显示内联块中。

@media screen and (max-width: 768px) {
    .DogadjajiLista{
        width:100%;
        text-align:center;
    }
    .DogadjajiLista li{
        display:inline-block;
        padding:0;
        margin:10px 5px; 
        float:none;
    }
}

我的问题是，当我在较小的屏幕上有3个'li'时，要将它们排成2'li'排成行，然后排成一行'li'。之后那个secon'ul'具有相同的行为，所以它看起来很漂亮。所以我想知道是否在javascript或jquery中有一些方法可以在较小的设备上制作四个'ul'。我希望我能很好地解释我的问题。 在这里你可以在责任人。 http://www.responsinator.com/?url=http%3A%2F%2Fwww.anaizadar.com%2Fhr%2Fdogadjanja

这是html

<ul class="DogadjajiLista">
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj01.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj1_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj1_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>24.10.-27.10.2013.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj05.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj5_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj5_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>29.08.-31.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj09.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj9_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj9_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>29.08.-31.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
</ul>   
<ul class="DogadjajiLista">
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj02.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj2_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj2_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>12.06.-15.06.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj06.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj6_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj6_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>08.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj10.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj10_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj10_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>30.06-04.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
</ul>  
<ul class="DogadjajiLista">
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj03.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj3_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj3_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>06.06.-08.06.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj07.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj7_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj7_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>10.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj11.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj11_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj11_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>10.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
</ul>  
<ul class="DogadjajiLista">
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj04.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj4_naslov?></h2>
            <p style="margin:5px 0;"><?=$tekst_dogadjaj4_opis?></p>
        </div>
        <div class="DogadjajiListDownload">
            <p>29.08.-31.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
            <img src="/images/Dogadjaji/Dogadjaj08.jpg">
        </div>
        <div class="DogadjajiListNaslov">
            <h2><?=$tekst_dogadjaj8_naslov?></h2>
            <!--<p style="margin:5px 0;"><?=$tekst_dogadjaj8_opis?></p> -->
        </div>
        <div class="DogadjajiListDownload">
            <p>23.08.2014.-29.08.2014.</p>                    
            <img src="/images/DogadjajiLivo.png">
        </div>
        <div class="clear"></div>
    </li>
</ul>