引导程序 3:行堆叠顺序

Bootstrap 3: Row stacking order

本文关键字：顺序 引导程序      更新时间：2023-09-26

我有 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刷新一次，它应该在页脚之前回扣到页眉。

谢谢

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

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

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

使用 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" ) );
相关文章：