css - 内联块如何换行至顶行

我在100％w的容器中有4个内联块。当我调整浏览器的大小以使其溢出时，添加浏览器会在底部添加新行，但我想在顶部添加新行，无论如何都要这样做？

**Full browser width:**
*** *** *** ***
*1* *2* *3* *4*
*** *** *** ***

**Overflow**

Doing this:

*** *** ***
*1* *2* *3*
*** *** ***

***
*4*
***

I want this:
***
*4*
***

*** *** ***
*1* *2* *3*
*** *** ***

这是我的代码：

的HTML

<div class="cajonera">
        <nav class="contenedorWidgets">
            <ul>
                <li>image1</li><li>image2</li><li>image3</li><li>image4</li>
            </ul>
        </nav>
    </div>

的CSS

 .cajonera{
    width: 100%;
    height: 100%;
    background-color: #040404;
    position: absolute;
}
.contenedorWidgets{
    position: absolute;
    bottom:63px;
    margin: 0 auto;
    width: 100%;

}

.contenedorWidgets ul{
padding: 0;
margin:0;
list-style-type: none;
list-style: none;

}

.contenedorWidgets ul>li {
    list-style: none;
    margin-left: -4px;
    text-align: center;
 }

谢谢 ：）

最佳答案

您将可以使用Flexible Box Layout Module和flex-direction: column-reverse进行此操作，但目前它不适用于所有浏览器...或者在过去的2或3年中，规范的更改次数过多了^^

显然在IE8-中不起作用，并且要在IE9，IE10，Opera，Firefox 21/22中进行测试... Demo for WebKit