Html 使用换行符对媒体查询上的div重新排序

基本上，我想做的就是使用floating对div进行重新排序，在较小的屏幕尺寸上，将中间的div浮动到左侧，将外部的两个div浮动到右侧

以下是当前订单：

<div id='one'></div>
<div id='two'></div>
<div id='three'></div>

除了已经存在的，我希望外部两个div位于左侧中间div的下方。基本上我希望它看起来像：

<div id='two'></div>
<div id='one'></div>
<div id='three'></div>

其中div two有display:block，display one/three有display:inline块-不更改html

仅使用CSS就可以做到这一点吗？

这可以通过以下方式实现：

<div class="boxes"> 
    <div class="one box">Box One</div> 
    <div class="two box">Box Two</div> 
    <div class="three box">Box Three</div> 
    <div class="four box">Box Four</div> 
</div>

---

来源：（查看演示链接）

请在小屏幕上发布显示您的愿望顺序的图像。完美，正是我想要的。好的旧桌子。

@media only screen and (max-width:768px) { 
    .boxes {  
    display:table; 
    width:100%; 
} 
.box { 
    display:block; 
    width:100%; 
} 
    .three { display:table-caption; } 
    .four { display:table-header-group; } 
    .one { display:table-footer-group; } 
}