基础 - 对齐嵌套的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

正如阿德里安所说，下拉是最好的，但你也可以这样做：

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

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