2

我有 2 行。我需要更改顺序（交换它们的位置），而不是在列上使用“推拉”技术。例如，如果在桌面尺寸下，当您达到较小的平板电脑尺寸时，您在页脚 div 顶部有一个页眉 div，它会在页眉顶部显示页脚。有没有办法使用 jQuery/Javascript 来实现这种效果？希望这是有道理的。

我尝试的列方式：

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-push-12">
                <div class="well">Header</div>
            </div>
            <div class="col-xs-12 col-md-pull-12">
                <div class="well">Footer</div>
            </div>
        </div>
    </div>

试图实现这一目标：

<div class="container">
        <div class="row header">
        </div> <!-- I need to be on bottom at smaller viewport size -->

        <div class="row footer">
        </div> <!-- I need to be on top at smaller viewport size -->
    </div>

见下文我目前正处于对工作做出响应的阶段：

http://jsfiddle.net/E5ZkW/3/

如果页面在 < 480 处刷新，它需要在页眉之前停留在页脚处，如果窗口大于 480，则在 < 480 处刷新一次，它应该在页脚之前重新回到页眉。

谢谢

4

2 回答 2

0

您可以使用 jquery toggleclass 方法，这是链接

http://api.jquery.com/toggleClass/

您可以在类之间切换或从 div 标签中删除一个类。

于 2013-11-07T05:57:51.420 回答
0

使用http://api.jquery.com/replaceWith/解决。下面的示例没有响应，但至少是我所追求的效果。

html:

<div class="container">
        <div class="row header">
            <h2>Header</h2>
            <ul>
                <li>Coffee</li>
                <li>Milk</li>
            </ul> 
        </div> <!-- Change to Bottom at smaller viewport size -->

        <div class="row footer">
            <h2>Footer</h2>
            <ul>
                <li>Buns</li>
                <li>Coco Pops</li>
                <li>Coke</li>
                <li>Fanta</li>
            </ul>
        </div> <!-- Change to Top at smaller viewport size -->
        <div class="row toggle">
            I am the replaced div
        </div> <!-- This is used as the div to be replaced -->
    </div>

jQuery：

$( ".toggle" ).replaceWith( $( ".header" ) );
于 2013-11-07T22:59:03.363 回答