更改响应式设计的 Div 顺序

问题描述

我正在创建一个响应式设计网站.

I am creating a responsive design website.

基本上当视口低于 X 时，我想在页面底部显示菜单.

Basically when the view port is lower than X I want to show the menu at the foot of the page.

示例链接已死 - 网站不再归我所有

EXAMPLELINK DEAD - SITE NO LONGER OWNED BY ME

如果您调整浏览器窗口的大小，您会注意到 3 种不同的设计(基于最终目标设计而不是设备类型)

IF you resize your browser window, you will notice 3 different designs (Based on end goal design rather than device types)

V1:大于 999px，您将看到左上角的红色框，红色框旁边的蓝色框.

V1: greater than 999px, You will see Red box top left, blue box next to red box.

V2:在 600px 到 999px 之间，您会注意到红色框变小，蓝色框现在位于红色框下方

V2: between 600px and 999px, You will notice red box gets smaller, blue box now sits under red box

v3:小于 600px，您会再次注意到红色框变小，蓝色框变为黄色.

v3: Less than 600px, You will notice again red box gets smaller, blue box now yellow.

基本上，在 V3 中，我想制作现在的黄色框，位于绿色框下方，灰色框上方

Basically, in V3, I want to make the now yellow box, sit under the green box, above the grey box

所以顺序红盒子绿盒子黄框灰盒

so the order goesRed BoxGreen BoxYellow boxGrey Box

除了讨厌的隐藏旧 div，显示新的 div hack(技术)或 JS 版本(远离 CSS Responsive)有没有办法移动这个.

Other than the nasty hide old div, show new div hack (technique) or JS version (goes away from CSS Responsive)Is there a way to move this.

CSS 在文件中，所以查看源代码会显示所有内容.

CSS is within the file, so view source shows everything.

干杯

推荐答案

老实说，我想不出单独在 CSS 中做到这一点的方法，但它在 jQuery 中很容易做到，而不会破坏您的响应式设计.除了从 #top-links div 中删除 margin-top 之外，您的 CSS 不需要更改.

I honestly can't think of a way to do this in CSS alone, but it is easily doable in jQuery without breaking your responsive design. Your CSS doesn't need to change except to remove the margin-top from the #top-links div.

    <script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));

    function listenWidth( e ) {
        if($(window).width()<600)
        {
            $("#topLinks").remove().insertAfter($("#content"));
        } else {
            $("#topLinks").remove().insertBefore($("#content"));
        }
    }
</script>

这篇关于更改响应式设计的 Div 顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！