Question

我在网站上遇到了布局问题。

我的网页视图按照我想要的方式布局，但是需要为移动视图稍微改变一下块的顺序。我已经尝试过使用对齐类，并推动＆＃39;或者＆＃39;拉＆＃39;课程，但可以满足我的需要。

以下是我需要的笔记本电脑视图：

左边一列中的第1区和第2区， Block6，Block4，Block5，Block6和Block7在右边。

这我没有问题。

但是对于移动视图，我从上到下按顺序需要它（见下图）：

第3组第1座第5块第4座第2块第5块第6区

有人可以帮忙吗？

Answer 1

你可以做的就是用jQuery来实现这个目标。

您可以拥有2个<div>代码。一个用于侧边栏（<div id="sidebar">）一个用于主要内容（<div id="main">）一个用于块（<div id="blocks"）（每个块也有自己的ID，例如块1的b1）

然后您可以使用此设备根据设备适当地排列块：

$(document).ready(function(){
    $("#b1").appendTo("#sidebar");
});

使用Bootstraps断点检测设备时，您可以按照本教程进行操作：How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?