根据屏幕大小调整div

Question

我有这些div，但是我似乎无法将它们显示为块。我有点拥有它，但是当我缩小我的屏幕时，它会回到之前的div上。

我navigation-body上有display: block;＆amp; icon-box-body上的display: block;

但是当缩小时，navigation-body div会返回icon-box-body div行。你认为它与我如何使用花车有关吗？

CSS：

.icon-box-body {
    float: left;
    display: block;
}

.icon-box {
    margin-top: 15px;
    margin-left: 2px;
    display: inline-block;
    background: #191919;
    border-color: #191919;
    color: #656565; 
    padding: 5px;
    width: 28px;
    height: 12px;
    border-radius: 20%;
}

.icon-box.one{
    margin-left: 6px;
}

.icon-box.two{

}

.icon-box.three{
}

#navigation-body {
    margin-top: 15px;
    float: left;
    display: block;
}

HTML：

<div class="icon-box-body">
      <div class="icon-box one">one</div>
      <div class="icon-box two">two</div>
      <div class="icon-box three">three</div>
</div>

<div id="navigation-body">                      
        navigation                              
</div>

这是一张图片：

但是在默认大小调整时正确放大时，它看起来很完美：