Question

我们的网站左栏中的每个页面都有一个子导航。然后，当子菜单保持不变时，该页面上的内容将加载到右侧列中。这适用于桌面用户，但对于移动用户，由于此子菜单，用户必须滚动才能访问内容。所以我们想要的是为移动用户重新定位这个子菜单，并在内容之后移动它。只是切换左右列的排序顺序。

现在，我已经宣布了几个根据屏幕大小的css媒体查询来隐藏/显示元素的类。这有效，但我们必须将子菜单相乘。有更简单的方法吗？ - 这是跨浏览器兼容的吗？

更新
这是页面的html：

<div class="grid">
    <aside class="grid_3">
        <div class="grid_w100 img"><img src="image.jpg"></div>
        <div class="grid_w100 pageMenu"><ul>...</ul></div><!--  tablet and above  -->
    </aside>
    <article class="grid_9">
        <h1>heading</h1>
        <p>...</p>
    </article>
    <div class="grid_w100 pageMenu"><ul>...</ul></div><!--  mobile only  -->
</div>

目标是只有一个pageMenu - 容器 - 第一个位于aside标记内的容器，只需将其重新定位，仅显示在article移动用户之后。< / p>

Answer 1

@Ben Phillip有正确的想法。以下是在Bootstrap中完成的方法。

http://jsfiddle.net/oakley808/ttumsbpe/

<div class="container">
    <div class="row">
    <div class="col-sm-9 col-sm-push-3">
         <h1>Heading</h1>

        <p>Article</p>
        <p>Article</p>
        <p>Article</p>
        <p>Article</p>
    </div>
    <div class="col-sm-3 col-sm-pull-9">
        <img src="//placehold.it/300x100/003366" class="img-responsive hidden-xs" />
         <h3>Menu</h3>

        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>
</div>

为移动用户重新安排div元素的顺序

1 个答案: