在窗口调整大小时重新排序DIV中的项目

<div id="data">
    <div class="qa">
        <div class="question">
            Question 1
        </div>
        <div class="answerswer">
            Answer 1
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 2
        </div>
        <div class="answerswer">
            Answer 2
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 3
        </div>
        <div class="answerswer">
            Answer 3
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 4
        </div>
        <div class="answerswer">
            Answer 4
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 5
        </div>
        <div class="answerswer">
            Answer 5
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 6
        </div>
        <div class="answerswer">
            Answer 6
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 7
        </div>
        <div class="answerswer">
            Answer 7
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 8
        </div>
        <div class="answerswer">
            Answer 8
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 9
        </div>
        <div class="answerswer">
            Answer 9
        </div>
    </div>
</div>

上面是一些基本的HTML，显示了我想要在三列时超过一定的窗口宽度。但是，当用户调整窗口大小时，我需要将列改为2列。因此，在表格的第一个变体中，它将是:

问题1:答案1 |问题4:答案4 |问题7:答案7
问题2:答案2 |问题5:答案5 |问题8:答案8
问题3:答案3 |问题6:答案6 |问题9:答案9

对于较小的屏幕，网格应该重新排序如下。

问题1:答案1 |问题6:答案6
问题2:答案2 |问题7:答案7
问题3:答案3 |问题8:答案8
问题4:答案4 |问题9:答案9
问题5:答案5 |

注意，我需要的数据是列而不是行。我一直试图使用一切从引导自定义javascript，我仍然不能得到这个工作。数据最初是用c#构建的，我需要这个在客户端工作，并跨浏览器友好。下面是一些代码，我一直试图得到的工作，它的工作，但我卡住了。有没有更好的办法?我肯定有。

if (typeof jQuery === 'undefined') {
    throw new Error('Resizable Columns requires jQuery.');
}
+ function($) {
    var version = $.fn.jquery.split(' ')[0].split('.');
    if ((version[0] < 2 && version[1] < 9) ||
        (version[0] === 1 && version[1] === 9 && version[2] < 1) || (version[0] > 3)) {
        throw new Error('Resizable Columns requires jQuery version 1.9.1 or higher, but lower than version 4.');
    }
}(jQuery);
function ResizeColumns(data, width, numCols) {
    this.data = data;
    this.width = width;
    this.noCols = numCols;
    this.resize = function() {
        if (width < 768) {
            this.noCols = 2;
        }
        if (data === undefined || data === null) {
            throw new Error('data is empty!');
        }
        if (this.data === undefined || this.data === null) {
            throw new Error('this.data is empty!');
        }
        logMessages('before max');
        var max = Math.ceil(this.data.length / this.noCols);
        var colArray = [];
        var msgs = '';
        msgs += 'data.length = ' + this.data.length;
        msgs += '<br />max = ' + max;
        msgs += '<br />width = ' + this.width;
        msgs += '<br />noCols = ' + this.noCols;
        logMessages(msgs, false);
        colArray = chunkArrayInGroups(data, max);
        msgs += '<br />colArray.length = ' + colArray.length;
        for (var i = 0; i < colArray.length; i++) {
            if (i === 0) {
                $('#data').after('<div class="section" id="section' + i + '"></div>')
            } else {
                var tmp = i - 1;
                $('#section' + tmp).after('<div class="section" id="section' + i + '"></div>')
            }
            var colData = colArray[i];
            for (var j = 0; j < colData.length; j++) {
                $('#section' + i).append(colData[j])
            }
        }
    };
    function chunkArrayInGroups(array, unit) {
        var results = [],
            length = Math.ceil(array.length / unit);
        for (var i = 0; i < length; i++) {
            results.push(array.slice(i * unit, (i + 1) * unit));
        }
        return results;
    };
};
function logMessages(msg, useConsole) {
    if (useConsole) {
        window.console && console.log(msg);
    } else {
        $('#msgs').html(msg);
    }
}
//$(document).ready(function() {
//  GetData();
//  var data = $("body").data("data");
//  var rc = new ResizeColumns(data, $(window).width(), 3);
//  rc.resize();
//});
function GetData() {
    var data = $("body").data("data");
    if (data === null || data === undefined) {
        data = $('#data').find('.qa');
        if (data !== null && data !== undefined) {
            $("body").data("data", data);
        } else {
            logMessages('No data loaded', true);
        }
    } else {
        logMessages('Data loaded via jquery.data()', true);
    }
}
var $window = $(window);
var width = $window.width();
$(window).on({
    load: function() {
        logMessages('load method');
    },
    resize: function() {
        setInterval(function() {
            if (width != $window.width()) {
                width = $window.width();
                GetData();
                var data = $("body").data("data");
                var rc = new ResizeColumns(data, width, 3);
                rc.resize();
            }
        }, 300);
    }
});