Question

这有点难以解释，所以请参考下面的视觉辅助工具。

当前桌面版 - ＆gt; http://i.stack.imgur.com/SdNp4.png

当前手机版 - ＆gt; http://i.stack.imgur.com/CjddY.png

所需的移动版本 - ＆gt; http://i.stack.imgur.com/7hxxl.png

JSBin - ＆gt; http://jsbin.com/wisurozilo/1/edit?output

我不确定这样做的最好方法，因为我是一名PHP / MySQL开发人员，这需要客户端专业知识。关于如何获得所需移动版本的任何建议？

没有要求将div组合在一列中，只是它们以一种以所需方式呈现的方式崩溃。

Answer 1

使用push和#slides img { width: 100%; height: auto; }进行列排序时，bootstrap 3中有built in feature。

Answer 2

尝试将元素1,3,5放在同一<div class="row">和另外一行的2,4,6中。你可以使用col - ？ - ？引导程序中的功能是将元素展开到所需的宽度。同一行中的元素将首先堆叠在移动设备中的另一行之前。

Answer 3

我决定使用jQuery在“断点”被击中时重新排列内容。我使用此脚本来检测特定断点何时被击中＆gt; https://github.com/cakebake/jquery-breakpoint-check我使用以下jQuery将元素移动到不同的父级

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

以下是一个工作示例：http://jsbin.com/cihuhe/edit?output

Bootstrap 3 - 在折叠时以自定义方式重新排列列中的div

3 个答案: