jquery - 在移动设备上以正确的顺序显示列

Question

我正在使用 Issuu 开发一个页面，我可以在其中以相关顺序嵌入每个出版物，在桌面上这看起来很棒并且所有出版物都以正确的顺序列出(最旧的在底部等)，测试 html我使用的代码是:

    <div class="row clearfix">
        <div class="col-md-4 column">
        <!--Issue 06-->
        <div>Issue 06<img src="http://placehold.it/300x250&text=Issue 06" /></div>
        <!--Issue 03-->
        <div>Issue 03<img src="http://placehold.it/300x250&text=Issue 03" /></div>
        </div>
        <div class="col-md-4 column">
        <!--Issue 05-->
        <div>Issue 05<img src="http://placehold.it/300x250&text=Issue 05" /></div>
        <!--Issue 02-->
        <div>Issue 02<img src="http://placehold.it/300x250&text=Issue 02" /></div>
        </div>
        <div class="col-md-4 column">
        <!--Issue 04-->
        <div>Issue 04<img src="http://placehold.it/300x250&text=Issue 04" /></div>
        <!--Issue 01-->
        <div>Issue 01<img src="http://placehold.it/300x250&text=Issue 01" /></div>
        </div>
    </div>

但是，当在移动设备上查看时，它会以正确的顺序加载列，这会打乱杂志期的顺序。我理解它为什么这样做，但我想不出一个好的解决方法让它既可以在桌面(目前是这样)又可以在移动设备上工作。

我在 jsFiddle 上创建了一个 fiddle :

http://jsfiddle.net/Vhbzs/

有什么想法吗？

Answer 1

你可以尝试这样的事情，两行，每行只有三个问题:

<div class="row clearfix">
    <div class="col-md-4 column">
        <!--Issue 06-->
        <div>Issue 06
            <img src="http://placehold.it/300x250&text=Issue 06" />
        </div>
    </div>
    <div class="col-md-4 column">
        <!--Issue 05-->
        <div>Issue 05
            <img src="http://placehold.it/300x250&text=Issue 05" />
        </div>
    </div>
    <div class="col-md-4 column">
        <!--Issue 04-->
        <div>Issue 04
            <img src="http://placehold.it/300x250&text=Issue 04" />
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-4 column">
        <!--Issue 03-->
        <div>Issue 03
            <img src="http://placehold.it/300x250&text=Issue 03" />
        </div>
    </div>
    <div class="col-md-4 column">
        <!--Issue 02-->
        <div>Issue 02
            <img src="http://placehold.it/300x250&text=Issue 02" />
        </div>
    </div>
    <div class="col-md-4 column">
        <!--Issue 01-->
        <div>Issue 01
            <img src="http://placehold.it/300x250&text=Issue 01" />
        </div>
    </div>
</div>

Demo