Question

在移动模板上，我想首先将联系人窗口小部件放在侧边栏内。请检查此示例。有没有办法做到这一点

<div class="container-fluid">
<div class="col-md-9">
<p>main content goes here</p>
</div>
<div class="col-md-3">
<div class="sidebar-nav">
  <ul class="nav">
    <li><a href="#" title="">Overview</a></li>
    <li><a href="#">Mission and Vision</a></li>
    <li><a href="#">Directors</a></li>
    <li><a href="#">Management</a></li>
    <li><a href="#">Structure</a></li>
  </ul>
</div>
<div class="contact-widget">
 <h3>Contact Address</h3>
 <p>some address will go here</p>
</div>
</div>
</div>

Answer 1

您可以添加两个导航而不是一个导航，并根据媒体查询添加show hide类。它是一种获得理想结果的简单方法。标记如下

<div class="col-md-3">
    <div class="sidebar-nav">
        <ul class="nav hideMobile">
            <li><a href="#" title="">Overview</a></li>
            <li><a href="#">Mission and Vision</a></li>
            <li><a href="#">Directors</a></li>
            <li><a href="#">Management</a></li>
            <li><a href="#">Structure</a></li>
        </ul>
        <div class="contact-widget">
            <h3>Contact Address</h3>
            <p>some address will go here</p>
        </div>
        <ul class="nav showMobile">
            <li><a href="#" title="">Overview</a></li>
            <li><a href="#">Mission and Vision</a></li>
            <li><a href="#">Directors</a></li>
            <li><a href="#">Management</a></li>
            <li><a href="#">Structure</a></li>
        </ul>
    </div>
</div>

使用twitter bootstrap在小屏幕中垂直重新排序div

1 个答案: