html - Foundation - 对齐嵌套的 div

Question

学习响应式设计和 Zurb 基础。

http://jsfiddle.net/CA669/1312/

2 个内部 div，绿色和红色没有响应。当前的设计只是在大屏幕上显示它们必须如何。应该怎么做才能使它响应。另外，我不确定在较小的屏幕上显示红色 div 的最佳方式是什么。

HTML:

<div>
        <div class="row fullWidth">
            <div class="twelve columns banner">
              <div class="logo">
                   Median Solutions</div>
              <div class="settings">
                   Hello Admin &nbsp;&nbsp;|
                   &nbsp;&nbsp;<a>Change Password</a>
                   &nbsp;&nbsp;|&nbsp;&nbsp;<a>Logout</a>
              </div>                    
            </div>
        </div>
    </div>

CSS:

*
{
    margin:0;
    padding:0;
}
.fullWidth
{
  width:100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}
.banner
{
    background:lightgray;
    height:60px;
}
.logo
{
    color:White;
    font-size:20px; 
    line-height:60px;    
    width:190px;
    border:1px solid green;
    float:left;   
}
.settings
{
    float:right;
    line-height:60px;
    color:White;
    width:310px;
    border:1px solid red;
}
 @media all and (max-width: 510px) 
 {
  .banner{height:auto; text-align:center;}
  .settings,
  .logo{float:none; display:inline-block;}
 }

编辑:

现在在一定宽度下看起来像这样:

Answer 1

正如 Adrian 提到的，下拉菜单是最好的，但您也可以这样做:

http://jsfiddle.net/CA669/1314/

@media all and (max-width: 510px) {
    .banner{height:auto; text-align:center;}
    .settings,
    .logo{float:none; display:inline-block;}
}