Reordering boxes with Isotope

问题

here's a jsfiddle http://jsfiddle.net/adsq4ygt/

<head>
    <title></title>
    <style>
        body {
            padding:0;
            margin:0;
        }
        .col-right, .col-left {
            width: 50%;
        }
        .col-left {
            float: left;
            clear: left;
            background: teal;
        }
        .col-right {
            float: right;
            clear: right;
            background: orange;
        }
        @media (max-width: 769px) {
            .col-left, .col-right {
                float: none;
                width: 100%;
            }
        }
        .a {
            height:300px;
        }
        .b {
            height: 150px;
        }
        .c {
            height:400px;
        }
        .d {
            height:150px
        }
        .e {
            height:250px
        }
        .f {
            height:350px
        }
        .f {
            height:450px
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="col-left a">A</div>
        <div class="col-right d">D</div>
        <div class="col-left b">B</div>
        <div class="col-right e">E</div>
        <div class="col-right f">F</div>
        <div class="col-left c">C</div>
        <div class="col-right g">G</div>
    </div>
</body>

with my custom layout. It's also responsive, the boxes just stack vertically. The pure CSS desktop version has issues - the empty spaces. I don't think I can get rid of them with pure CSS, so I wanted to use Isotope.

I've been playing with different settings but wasn't able to achieve that with Isotope. Can anyone help me with Isotope options that'd achieve this? You can also modify markup/CSS - as long as the mobile version looks the same as now it's not a problem

Thanks

来源：https://stackoverflow.com/questions/25301196/reordering-boxes-with-isotope

标签

jquery-isotope

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!