如何在移动视图中将侧栏向上移动

时间:2019-05-13 09:50:34

标签: html css twitter-bootstrap bootstrap-4 sidebar

因为我正在处理附加前端图像的代码,所以我想将此边栏移动到移动视图中所有分区的顶部 https://imgur.com/OsuzoXQ“ image1” https://imgur.com/oG6pTDO“移动图像”

我希望该部门超越其他所有部门

<?php
error_reporting(0);
?>

<div class="container main-container">



<div class="row">
    <div class="container">
        <div class="col-sm-9 home col-sm-push-3" id="content">

            <?php $this->load->view('user/slider'); ?>

        <div style="clear:both"></div>
        <div style="clear:both"></div>
        <div class="hideOnSearch">
            <div class="product-list-wrapper">
                <div class="tricol-product-list">
                    <div class="col-sm-12">
                        <h2 class="visible-xs">New Arrivals</h2>
                    </div>
                    <div class="inv-section">
                        <?php $i = 1; foreach($result as $inventory ): ?>
                            <div class="col-sm-6 inv-col">
                                <div class="item-container">
                                    <a class="price-name" href="<?php echo base_url('UserController/view_single_inventory/'.$inventory->id); ?>">
                                        <?php echo $inventory->name; ?>                                    
                                    </a>

                                    <div style ="border:1px solid black;" class="image-container">
                                        <!-- <div class="status-tag New">New</div> -->
                                        <a href="<?php echo base_url('UserController/view_single_inventory/'.$inventory->id); ?>">
                                            <img width="100%" height="180" src="<?php echo base_url('uploads/'.json_decode($inventory->featured_img)); ?>" class="img-responsive" /> 
                                        </a>
                                    </div>
                                    <div class="arrivals-details" >
                                        <div class="more-details">
                                            <span class="year-detail">
                                                Year: 
                                                <span class="colored-text"><?php echo $inventory->year; ?></span>
                                            </span>


                                            <span align="right" class="milage-detail" > 

                                                Mileage: 
                                                <span class="colored-text"><?php echo $inventory->mileage; ?> Miles</span>
                                                </span>

                                            <div class="clear"></div>
                                        </div>
                                        <!-- <p class="strong grid-location"> Nashville, Tennessee</p> -->
                                        <div class="price-detail">
                                            <span class="pull-left price-span">
                                                <p>
                                                    <span align="left"  class="price">Price</span>
                                                    <span class="price-figures">
                                                        $ <?php echo $inventory->price; ?>                                        
                                                    </span>
                                                </p>
                                            </span>

                                            <a  class="btn btn-default pull-right btn-inv-details" href="<?php echo base_url('UserController/view_single_inventory/'.$inventory->id); ?>">Details <i class="fas fa-chevron-right"></i> </a>
                                            <div class="clear"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div style =  "position:relative">
            <?php $this->load->view('user/search', ['search_results' =>         
 $search_results] ); ?>
      </div>
    </div>
        </div>
         </div>
<style>
         span.indent
    {
    padding-left :1.8em;
    }
   .side-widget h3 {
    background: #e0b414 !important;
   }

.form-button:hover {
    background: linear-gradient(#e0b414, #e0b414) !important;
}
.text-center {
text-align: center;
font-size: 15px;
}
.btn-inv-details:hover {
 background:  #e0b414 !important;
 </style>

代码正在使用引导程序,并且我从该行获取搜索栏:           load-> view('user / search',['search_results'=>
     $ search_results]); ?>

我想将栏移到上方

0 个答案:

没有答案