较小设备的互换元件位置 - 自举

时间:2015-12-17 19:44:01

标签: html css twitter-bootstrap twitter-bootstrap-3

我想仅为sm个设备交换两个元素的位置。

目前是这样的:

 ----------------- -----------------
|        Text        |        Button        |
 ----------------- -----------------

我希望它是这样的:

 ----------------- 
|        Button        |
 -----------------
|        Text        |
 -----------------

FIDDLE中,Know the status文字应位于Save设备的sm按钮下方。

FIDDLE HERE

1 个答案:

答案 0 :(得分:2)

您需要Bootstrap的列排序功能:

http://getbootstrap.com/css/#grid-column-ordering

这是一支笔,向您展示一个如何运作的例子:

http://codepen.io/anon/pen/QyNGWL

注意元素的顺序是TEST 2,然后是TEST 2并排。随着视口的断点变小,它们会切换位置,然后,按照您的要求,TEST 1元素在最小断点处堆叠 var matrix = [ [0, 1, 1, 0, 0], [1, 0, 1, 1, 1], [1, 1, 0, 1, 0], [0, 1, 1, 0, 1], [0, 1, 0, 1, 0] ]; var startVertex = 1; var vertices = []; var lastTakenOff = -1; var findHamilton = function (v) { for (var i = 0; i < matrix[v].length; i++) { if (matrix[v][i] === 1 && vertices.indexOf(i) === -1 && i > lastTakenOff && vertices.length < matrix[v].length) { vertices.push(i); console.log(vertices) lastTakenOff = -1; return findHamilton(i); } else if (vertices.length < matrix[v].length) { console.log(vertices); lastTakenOff = vertices.pop(); return findHamilton(vertices[vertices.length - 1]); } } }; vertices.push(startVertex); findHamilton(startVertex); console.log(vertices) 元素。