html - 如何创建 facebook 风格的时间线，但具有 3 种不同风格的响应式设计？

Question

如何创建 facebook 风格的时间线，但具有 3 种不同风格的响应式设计？

预期是什么

代码:

<div class="timeline">
    <div class="item item-1">
        blablabla....
    </div>
    <div class="item item-2">
        blablabla....
    </div>
    <div class="item item-3">
        blablabla....
    </div>
    <div class="item item-4">
        blablabla....
    </div>
    <div class="item item-5">
        blablabla....
    </div>
    <div class="item item-6">
        blablabla....
    </div>
    <div class="item item-1">
        blablabla....
    </div>
    <div class="item item-2">
        blablabla....
    </div>
    <!-- It just goes on and on... -->
</div>

桌面(最小宽度:980px)

连续 3 个框，根据它们的编号排列。.item-1和.item-4到第一行，.item-2和.item-5 转到第二行，依此类推。

平板电脑(最小宽度:768px)

连续 2 个盒子。 .item-1 .item-3 和.item-5 到第一行，.item-2 .item-4 和 .item-6 转到第二行。

手机(最大宽度:767px)

只需将它们排成一行即可。

附加信息

此样式应适合任何高度的内容。像这样: 或者类似 this 的东西也被接受，不需要将框放入正确的列中，只要它们均匀放置并按正确的顺序排列即可。

抱歉我的英语不好，我是中国人。但是可以随意写任何东西。我可以阅读它们。

Answer 1

jQuery Masonry 在不同的显示中使用不同宽度的框就可以了。

jQuery Masonry

元素编号不是必需的。