Javascript 引导程序3：行堆叠顺序

我有两排。我需要改变顺序（围绕它们的位置交换），而不是在列上使用“推拉”技术。例如，如果在桌面大小时，页眉div位于页脚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>

如果页面在<480刷新，它需要保持在页眉之前的页脚处；如果窗口大于480，则在<480刷新一次，它应该恢复到页眉之前的页脚处

---

谢谢

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

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

使用解决。下面的例子没有响应，但至少是我想要的效果

html:

---

如果您能够提供一些HTML代码，这将是值得赞赏的。您尝试了什么？只是好奇为什么您要将页眉和页脚替换为mobile？…这只是一个简单的示例，用于演示目的，虽然是的，如果我错了，请更正我是没有意义的，但我不认为这会像行中包含的内容那样起作用他们。切换添加或删除类/ID，但我需要移动整行，其中包含所有内容。这当然是可能的。

<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/

<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>

$( ".toggle" ).replaceWith( $( ".header" ) );