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上创造了一个小提琴：

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

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

1 个答案: