Mobile images zipper

Often we use alternate text/image and image/text layouts and it looks cool on desktops. But when you'll go to mobile, you probably want to see the image and its description under, not on the top.

So there some CSS ways to fix with flex-boxes or CSS Grids.  But I'm simple man, I do not like all your new shiny trendy stuff, we will use JS to find an alternate layout (where the image is under the text on mobiles/on the right hand on desktops) and just append columns in the right way.

I'm simple man, I do not like all your new shiny trendy stuff and frameworks

So here is the quick code snippet which works for 2 columns in one row (.sqs-row>2*.sqs-col-*)  and with Image block in one column structure.  Inserting on different pages or using different selectors, you may use it for pages you need.  Try to resize this page and check the code below.

Features Overview

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Sed a ligula quis sapien lacinia egestas. Donec eget risus diam. Vivamus sit amet semper lacus, in mollis libero. Mauris egestas at nibh nec finibus.

Feature 1

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris egestas at nibh nec finibus. Fusce at massa nec sapien auctor gravida in in tellus. Donec ac fringilla turpis. Mauris id fermentum nulla. Aenean eu justo sed elit dignissim aliquam.

---

Feature 2

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa. Nulla eu pretium massa. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa.

And Some Table Here

City	Population, million	Density, men/km2
New York	8 537 673	4 042 000
Los Angeles	10 831 100	3 198 000

---

Feature 3

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus. Mauris id fermentum nulla. Integer tempus, elit in laoreet posuere, lectus neque blandit dui, et placerat urna diam mattis orci. In sit amet felis malesuada, feugiat purus eget, varius mi.

(function() {
        var body = Y.one('body');
        var sqsRows = false;
        var resizeEvent = null;

        function syncUI() {
            console.log('syncUI');
            doMobileAlternateBlocks();
        }

        function doMobileAlternateBlocks() {
            if (sqsRows && sqsRows.size()) {
                if (window.innerWidth < 641) {
                    sqsRows.filter('.alternate-row').each(function(row) {
                        if (row.one('.first-col')) {
                            row.prepend(row.one('.first-col'));
                        }
                    })
                } else {
                    sqsRows.filter('.alternate-row').each(function(row) {
                        if (row.one('.first-col')) {
                            row.append(row.one('.first-col'));
                        }
                    })
                }
            }
        }

        function activateAlternateColsInRow(rows) {
            rows.each(function(row) {
                var all_colls = row.all('.col');
                if (all_colls.size() === 2 && !row.one('.sqs-row') && all_colls.item(1).one('.image-block')) {
                    row.addClass('alternate-row');
                    all_colls.item(1).addClass('first-col');
                }
            });
        }

        window.Squarespace.onInitialize(Y, function() {
            body = Y.one('body');
            if (body) {
                sqsRows = body.all('.sqs-layout .sqs-row');
                if (sqsRows.size()) {
                    activateAlternateColsInRow(sqsRows);
                    resizeEvent = Y.one(window).on('resize', syncUI);
                    syncUI();
                }
            }
        });
        window.Squarespace.onDestroy(Y, function() {
            resizeEvent && resizeEvent.detach();
        });
    }
)();