为移动用户重新排列 div 元素的顺序答案

【问题标题】：Re-arranging the order of div elements for mobile users为移动用户重新排列 div 元素的顺序
【发布时间】：2015-07-29 22:56:39
【问题描述】：

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

到目前为止，我已经声明了几个使用 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-container - 第一个位于aside 标记内，然后将其重新定位以显示在article 之后，仅供移动用户使用。

【问题讨论】：

您可以使用 javascript 执行此操作，但我们需要查看您当前的代码。
尝试在屏幕外隐藏子菜单，让它在用户按下按钮时出现。我非常怀疑用户在您的页面上是否始终需要访问子菜单。
如果所有元素都需要在您的移动版本中可见，您可以重新排列顺序，以便就 HTML 而言，主要内容在技术上排在第一位，但将菜单浮动在桌面左侧版本。使用 CSS 媒体查询在您的移动版本中删除该样式，以使主要内容回到首位。

标签： html css mobile responsive-design

【解决方案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>

【讨论】：