响应式设计更改Div订单 [英] Change Div order on Responsive Design

问题描述

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

I am creating a responsive design website.

基本上当视口低于XI要显示页面底部的菜单时。

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

示例
LINK DEAD - 网站长度不超过我

EXAMPLE LINK 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：介于600像素和999像素之间，您会注意到红框变小，蓝框现在位于红框下

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

v3：小于600像素，您会注意到红框变小，蓝框变黄。

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 goes Red Box Green Box Yellow box Grey Box

除了讨厌的隐藏旧div，显示新的div hack（技术）或JS版本（远离CSS响应）
有办法移动此文件。

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在文件中，所以view source显示所有内容。

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订单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！