Twitter bootstrap 3 单/双引导列取决于显示大小，保留每个列中的内容顺序，同时不浪费空间

我有6个不同长度的不同元素，我试图提出一个引导网格布局，实现以下目标

要在中型和大型显示器中显示的两列布局：

请注意，下面示例中的框3从框1下开始，即使框2比框1长得多

MD+
|-----|-----|
|  1  |  2  |
|-----|     |    
|  3  |-----|
|-----|  4  |    
|  5  |-----|
|-----|  6  |
      |-----|

对于小于中等尺寸的显示器，采用以下单列布局：

XS/SM:
|-----|
|  1  |
|-----|
|  2  |
|     |
|-----|
|  3  |
|-----|
|  4  |
|-----|
|  5  |
|-----|
|  6  |
|-----|

为了全面起见，我从不想要3个或更多的专栏：

|-----|-----|-----|          
|  1  |  2  |  3  |
|-----|     |-----|     
|  4  |-----|  6  |
|-----|  5  |-----|
      |-----|

而且顺序必须保持1-6，而不是1-3后面跟着4-6

我能够使用以下代码分别实现2列布局和单列布局，但当显示大小从SM/MD更改时，它们都会中断，反之亦然：

为XS/SM工作：

<div class="row">
    <div class="col-xs-12 col-md-6"> 1 </div>
    <div class="col-xs-12 col-md-6"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi.  </div>
    <div class="col-xs-12 col-md-6"> 3 </div>
    <div class="col-xs-12 col-md-6"> 4 </div>
    <div class="col-xs-12 col-md-6"> 5 </div>
    <div class="col-xs-12 col-md-6"> 6 </div>
</div>

1.
2洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的献身者。在暂时的情况下，这是一个非常重要的问题。佩伦茨克无底鞋，无底鞋和无底鞋，无底鞋和无底鞋。无便利。埃尼亚河无芸香属植物。Nam vel varius libero，欧盟港口或侵权人。在这本书中。我是帕特·波苏尔·乌纳，我是福西布斯·安特·洛博蒂斯·阿梅特。这是我的最爱。
3.
4.
5.
6.

为MD+工作：

<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12"> 1 </div>
            <div class="col-xs-12"> 3 </div>
            <div class="col-xs-12"> 5 </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi.  </div>
            <div class="col-xs-12"> 4 </div>
            <div class="col-xs-12"> 6 </div>
        </div>
    </div>
</div>    

1.
3.
5.
2洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的献身者。在暂时的情况下，这是一个非常重要的问题。佩伦茨克无底鞋，无底鞋和无底鞋，无底鞋和无底鞋。无便利。埃尼亚河无芸香属植物。Nam vel varius libero，欧盟港口或侵权人。在这本书中。我是帕特·波苏尔·乌纳，我是福西布斯·安特·洛博蒂斯·阿梅特。这是我的最爱。
4.
6.

---

使用Bootstrap 3是否有可能获得所需的布局，如果有，如何实现？

我最终拼凑了一个jquery解决方案，将HTML转换为 将网格结构引导到根据当前 显示大小

为了方便起见，我还拼凑了一个类函数，该类函数提供了一个dz对象（displaySize），该对象不仅确定当前的引导显示大小中哪些是活动的（xs、sm、md或lg），而且还提供了一种方法，用于在重新加载后显示大小发生变化时执行在类中注册的自定义函数引用（窗口大小调整事件使用下划线取消公告）

这是我最后使用的代码，如果您知道如何使用 只是引导网格结构和类，然后请发布一个答案，因为我 我宁愿这样做

对HTML的唯一更改是将两个类名添加到parent.row元素（.custom layout.custom-layout-2col）中。是从单列布局开始还是从两列布局开始取决于您。只需更改第二个类名以匹配开始的布局。从哪一个开始并不重要，因为如果需要，代码会将其更改为另一个，但您应该从与大多数显示大小匹配的布局开始你的用户

以下显示了为两列布局添加的类：

<div class="row custom-layout custom-layout-2col">
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12"> 1 </div>
            <div class="col-xs-12"> 3 </div>
            <div class="col-xs-12"> 5 </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi.  </div>
            <div class="col-xs-12"> 4 </div>
            <div class="col-xs-12"> 6 </div>
        </div>
    </div>
</div> 

// This is the dz class. Load this after jquery.
// Note that it instantiates itself, just load it on your page.
// Requires the underscore library (or just the _.restArguments, _.delay, 
// and _.debounce functions from the library if you want to copy them out
// separately. )
; (function () {
    var Def = function () { return constructor.apply(this, arguments); }
    var attr = Def.prototype;

    //attributes
    attr.currentSize = '?';
    attr.previousSize = '?';
    attr.changeHandler = [];

    //constructor
    function constructor() {
        var self = this;
        $(document).ready(function () {
            $('.wrapper-content').append('<div class="device-xs hidden-xs"></div><div class="device-sm hidden-sm"></div><div class="device-md hidden-md"></div><div class="device-lg hidden-lg"></div>');
            $(window).resize(_.debounce(function () {
                self._determineDeviceSize();
            }.bind(self), 200));
            self._determineDeviceSize();
        }.bind(self));
    }

    //methods
    attr.getCurrentSize = function () {
        return this.currentSize;
    }

    attr.getPreviousSize = function () {
        return this.previousSize;
    }

    attr.addChangehandler = function (f) {
        if (typeof f === 'function') { this.changeHandler.push(f); }
    }

    attr._determineDeviceSize = function () {
        var c = this.currentSize;
        this.currentSize = $('.device-lg').is(':hidden') ? 'lg' : ($('.device-md').is(':hidden') ? 'md' : ($('.device-sm').is(':hidden') ? 'sm' : 'xs'));
        if (c !== this.currentSize) {
            this.previousSize = c;
            // execute any registered size change handler functions
            for (i = 0; i < this.changeHandler.length; ++i) {
                this.changeHandler[i](this.currentSize, this.previousSize);
            }
        }
    }

    //unleash the class (if it hasn't already been)
    if (typeof window.dz === 'undefined') {
        window.dz = new Def();
    }
})();


// Register our function with dz for the work that needs to be done
// if the bootstrap display size changes
dz.addChangehandler(function (csz, psz) {
    $('.custom-layout').each(function () {
        var parentRow = $(this);

        // Change from 1 col to 2 col ?
        if (parentRow.is('.custom-layout-1col') && (csz == 'md' || csz == 'lg')) {
            var allDivs = parentRow.children('div');
            var mCt = allDivs.length;
            if (mCt > 0) {
                // create the new row/col structure that we will move all the existing .col-* div's into
                var id = 'custom' + (new Date).getTime();
                var id2 = id + '2';
                parentRow.after('<div class="row custom-layout custom-layout-2col"><div class="col-md-6"><div id="' + id + '" class="row"></div></div><div class="col-md-6"><div id="' + id2 + '" class="row"></div></div></div>');
                var newOddParent = $('#' + id);
                var newEvenParent = $('#' + id2);
                var idx = 0;
                while (idx < mCt) {
                    if (idx === 0 || idx % 2 === 0) {
                        // odd
                        newOddParent.append($(allDivs[idx]));
                    } else {
                        // even
                        newEvenParent.append($(allDivs[idx]));
                    }
                    idx++;
                }
                // remove the old parent from the DOM
                parentRow.remove();
            } else {
                console.log('Unable to change custom-layout -- Unable to locate any div (col-*) elements in parent: ', parentRow);
            }
        }

        // Change from 2 col to 1 col ?
        if (parentRow.is('.custom-layout-2col') && (csz == 'xs' || csz == 'sm')) {
            var childRows = parentRow.children('div').children('.row');
            if (childRows.length == 2) {
                // create the new .row div that we will move all the .col-* div's into
                var id = 'custom' + (new Date).getTime();
                parentRow.after('<div id="' + id + '" class="row custom-layout custom-layout-1col"></div>');
                var newParent = $('#' + id);
                // locate all of the col-* div's that we will be moving
                var oddRowDivs = $(childRows[0]).children('div');
                var evenRowDivs = $(childRows[1]).children('div');
                childRows = '';
                var oCt = oddRowDivs.length;
                var eCt = evenRowDivs.length;
                var mCt = Math.max(oCt, eCt);
                var idx = 0;
                // move the div's directly into the parentDiv in a staggered order
                //  starting with the odd (left side) div #1, then even (right side) div #2, etc..
                while (idx < mCt) {
                    if (idx < oCt) {
                        newParent.append($(oddRowDivs[idx]));
                    }
                    if (idx < eCt) {
                        newParent.append($(evenRowDivs[idx]));
                    }
                    idx++;
                }
                // remove the old parent from the DOM
                parentRow.remove();
            } else {
                console.log('Unable to change custom-layout -- Unable to locate the 2 child .row elements in parent: ', parentRow);
            }
        }
    });
});

// if all you need is the current display size then use the dzCurrentSize variable
// just make sure your accessing it after jquery's $(document).ready
$(document).ready(function () {
    console.log('page size: ' + dz.getCurrentSize());
});


// using a change handler function
dz.addChangehandler(function (currentSize, previousSize) {
    // example usage scenarios:

    // always do stuff (on page initialization and when the size changes anytime afterwards)
    alert("The bootstrap display size is: " + currentSize);

    // do stuff ONLY if the size changed after page initialization
    if (previousSize !== '?') {
        console.log('The size has changed after initialization from: ' + previousSize + ' to: ' + currentSize);
    }

    // do stuff ONLY on page initialization
    if (previousSize === '?') {
        console.log('The page has just initialized with a size of: ' + currentSize);
    }

});