javascript - 具有三个 div 的响应栏

Question

在我的 Wordpress 子主题 (TwentyTwelve) 中，我正在创建一个带有菜单、搜索表单和社交链接菜单的栏。在找到解决方案之前，我无法正确对齐它们。我在 css 中显示一个表行，然后显示三个单元格(也在 css 中)。代码如下所示:

#table-row{
display: table-row;
line-height: 44px;
text-align: right;  
}

#menubar{
display: table-cell;
padding-left: 40px;
}
#search-container {
display: table-cell;
}
#menu-social-wrapper{
display: table-cell;
}

标记如下所示:

<div id="navigation-container" class="navigation-container">
            <nav id="site-navigation" class="main-navigation" role="navigation">

                <div id="table-row">
                    <div id="menubar">
                        <button class="menu-toggle"><?php _e( '<i class="fa fa-bars"></i>', 'twentytwelve' ); ?></button>
                        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>                    
                    </div>

                    <div id="search-container" class="search-box-wrapper clear">
                        <div id="searchbox" class="search-box clear">
                            <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : endif;?>
                        </div>
                    </div> 

                    <div id="menu-social-wrapper" class="menu-social-wrapper">
                        <?php get_template_part( 'menu', 'social' ); ?>
                    </div>
                </div>    

            </nav><!-- #site-navigation -->
        </div>

这给了我这个很好的结果:

然而，当屏幕较小时(在本例中为 400 像素)，我得到了错误的结果:

我想实现的是:

+------------------------------+
|  Search bar                  |
+------------------------------+
|  Social Icons menu           |
+------------------------------+
|  Menu (toggles, bar icon)    |
+------------------------------+

我现在已经尝试了几天，但我还没有找到解决方案。

请帮帮我。注意:我有点新手，所以尽可能简单。

Answer 1

一如既往...当我发布问题时，答案就会出现。就在 Awashi 发表评论之前，我想通了。事实上，媒体查询是答案的一部分，然后将 css 从display:table-row 和 display:table-cell 到 display:block。

必须在边距和填充上做一些工作，但现在看起来很棒。

随之而来的是另一个问题，但我确信我可以解决它。

无论如何，感谢您的评论。