html - 将左右浮动包围的元素移动到下一行

Question

我有一个复杂的标题，其中有很多元素通过 float: left 和 right 移动。他们在桌面上工作得很好。但是我想实现一个响应式 View ，其中导航元素被移动到下一行。

这里有一张图片来演示:

问题是如何将中间的菜单元素向下推到下一行，而其他元素保持原位。

这是一个非常基本的 header 完整 View 标记表示:http://jsfiddle.net/aAG2s/

 <header class="clearfix">
    <div class="pull-left">Button 1</div>
    <div class="pull-left">Logo</div>
    <div class="pull-left menu">Menu</div>

    <div class="pull-right">Button 2</div>  
</header>

编辑澄清:

我正在寻找一种不改变 html 标记顺序的方法。

Answer 1

使用媒体查询:Fiddle

     header {
     border: 1px solid black; 
     padding-bottom: 50px;}
.pull-left, .pull-right {
     border: 1px solid red; 
     padding: 5px; margin: 5px}
.menu {
     border: 1px solid blue;
     position: absolute;
     margin-top: 50px;
     right: 0;
     left: 0px;}
@media (min-width: 768px) {
    .menu {
         position: relative;
         margin: 5px;
         width: auto;
     }
     header {
          padding-bottom: 0px;
}
}