如何将过滤器/搜索框从侧边栏移动到顶部引导

Question

我使用Twitter bootstrap 3和CodeIgniter。在我的网站上，我有左边的帖子列表和右边的侧边栏列。在这个侧边栏中，我有一个带有输入框和下拉框的搜索框，另一个包含10个热门帖子列表的框，还有一个包含类别列表的框。

我想移动只有侧边栏的搜索框，以较小的屏幕设备网站的顶部。因为它是一个搜索框，我希望它首先显示，然后在移动视图的帖子。

我做这件事有困难。我已经设法重新排序了列，但结果不是整个列首先显示，我希望搜索框在顶部。

有什么建议吗?pull-left和pull-right对我不起作用，或者我无法使其工作。使用带有隐藏值和显示值的类是更好的方法吗?

这是我的post view模板

<div class="container">
    <div class="row">                 
        <div class="col-sm-8">
            <div id="content" class="content-page">
                <h2><?php echo $title; ?></h2>
                <?php echo $content; ?>                                         
            </div> <!-- // content -->
        </div><!-- // col-sm-8 -->
        <div class="col-lg-4">
           <?php $this->load->view('templates/posts_sidebar');?>
        </div><!-- // col-lg-4 -->
    </div><!-- // row -->
    <hr>
</div><!-- // container -->

侧边栏搜索视图为:

                    <div class="well post_search">         
<?php $attributes = array('id' => 'search', 'role' => 'form', 'autocomplete' => 'off'); ?>
                        <?php echo form_open('posts/filter', $attributes); ?>  
                        <div class="form-group">
                            <h4><label for="title"><i class="fa fa-search"></i> <?php echo $text_posts_sidebar_search; ?></label></h4>
                            <div class="input-group">
                                <?php echo form_input('title', set_value('title', $this->input->get('title')), 'class="form-control" id="title" placeholder="'.$text_posts_sidebar_search_placeholder.'"'); ?>
                                <span class="input-group-btn">
                                    <?php echo bt_submit('', '<span class="fa fa-search"></span>', 'btn btn-default'); ?>
                                </span>
                            </div>                            
                        </div>
                        <div class="form-group">
                            <label for="parent_id"><i class="fa fa-folder-open-o"></i> <?php echo $text_posts_sidebar_search_in; ?></label>
<?php echo form_dropdown('parent_id', $dropdown_postcategories, $this->input->get('parent_id') ? $this->input->get('parent_id') : '', 'id="parent_id" class="form-control"'); ?>
                        </div>                        
                        <!-- // input-group -->                      
                        <?php echo form_close(); ?>                    
                    </div><!-- /well -->

Answer 1

好的，我整理了我的问题。如果这对其他人有帮助的话。

在我的模板中，我现在实际上有两个搜索表单。一个可见，一个隐藏。

根据屏幕分辨率，使用媒体查询，我可以显示或隐藏我需要的内容。