Question

这是我正在研究的my website。

正如您所看到的，桌面模式中有一个侧边栏。但是当你在移动模式下看到它时，侧边栏会在左侧显示的内容下面。

现在我想要的移动视图是让侧边栏显示在顶部，之后内容应该出现。我尝试了许多诸如position:absolute;和margin之类的内容，但它并不适用于我。

请建议执行此任务的正确方法。

这对我有用

<script type="text/javascript">

var windowWidth = $(window).width();
//window.alert(windowWidth);
if(windowWidth<=767){
    $('.wf-span-4').insertBefore('.wf-span-8');
    }
    </script>

Answer 1

您应该提供代码的简化版本，但是，这就是我所拥有的。

您有两种选择之一：

更改网站的结构，以便顺序颠倒第一名。
使用jquery将内容移动到某个位置以下宽度ex：$('#sidebar').insertBefore('#content')

Answer 2

正确的方法是将标记以正确的顺序开头。标记是结构，应该独立于样式（尽可能多）。

然后你的代码看起来像这样

<section class="main">
    <div class="sidebar">Bye</div>
    <main class='content'>Hi</main> 
</section>

所有你需要做的就是移除手机上的花车，这样内容就会回到默认流程中。像这样：

.content {
    width:75%;
    float:left;
}
.sidebar {
    width:25%;
    float:right
}

@media screen and (max-width:767px) {
    .content, .sidebar {
        float: none;
    }
}

（请注意，我更新了您的类名和标记，只是因此代码可以更好阅读）

以下是您的最新演示：http://jsfiddle.net/ehozb5v9/2/

如何在响应中更改div位置

2 个答案: