Split 4 col into 2x2

by moob

HTML

<section>
            <div class="bounds">
                <div class="container">
                    <div class="block clearfix">
                        <div class="content">
                            <h1>Split 4 col in 2x2 (responsively)</h1>
                        </div>
                    </div>
                </div>
                <div class="container">
                        <div class="block one-fourth">
                            <div class="content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem hic mollitia incidunt? Alias voluptatibus minus iusto incidunt delectus, praesentium saepe quia ab tenetur beatae soluta, eligendi ut veniam ipsum architecto.</p>
                            </div>
                        </div>
                        <div class="block one-fourth">
                            <div class="content">
                                <p>Nisi consequatur aliquam molestiae quisquam omnis animi molestias ipsa sapiente nihil error, hic soluta, doloribus numquam iure maxime facere sint itaque odit? Totam sunt, et vero fuga! Corporis, consectetur, aliquam molestiae quisquam omnis animi molestias ipsa sapiente nihil error, libero.</p>
                            </div>
                        </div>
                        <div class="block one-fourth">
                            <div class="content">
                                <p>Repellat magnam quod provident, laboriosam eligendi pariatur eum facilis consequuntur, assumenda adipisci non incidunt ipsam impedit quam ea vitae? Cumque itaque architecto consectetur.</p>
                            </div>
                        </div>
                        <div class="block one-fourth">
                            <div class="content">
                                <p>Repellat magnam quod provident, laboriosam eligendi pariatur eum facilis consequuntur, assumenda adipisci non incidunt ipsam impedit quam ea...

CSS

.container {display:table; table-layout:fixed; border-spacing:10px; width:100%;}
.block {display:table-cell; border:1px solid black;}
.one-half {width:50%;}
.one-fourth {width:25%;}

.injectedTableRow {}


@media only screen and (max-width: 500px) {
    .one-fourth {
        empty-cells:hide; /* (default is 'show') The JS function Split4Into2() splits rows of 4 into two rows of 2 where this matched */
    }
}

@media only screen and (max-width: 300px) {
    .one-fourth {
        display:inline-block;
        width:100%;
        margin-bottom:10px;
        border-color:red;
        empty-cells:show;/* undo the JS Split4Into2() */
    }
}

JavaScript

/*
 * split4Into2();
 * SPLITS ROWS OF 4 COLUMNS INTO 2 ROWS OF 2 COLUMNS WHEN REQUIRED
 * (requires jQuery)
 *
 * If a particuar CSS attribute matches a specific value then split a 4-column row in to 2 rows of 2.
 * This is currently set for .one-fourth to have 'empty-cells:hide' for narrow viewports.
 * Where matched, the function is applied.
 */
(function(){
    function split4Into2(){
        var cssAttr = "empty-cells", cssVal = "hide", //the trigger css attr and value
            $quarterCells = $(".container .one-fourth, .wasContainer .one-fourth"), //all .one-fouth cells
            applyMethod = ($quarterCells.css(cssAttr)==cssVal), //should we apply the method? look for a match.
            alreadyApplied = ($(".container .injectedTableRow, .wasContainer .injectedTableRow").length>0); //has it already been applied (we dont want to re-apply it)
        if(applyMethod && !alreadyApplied){//apply if not already done so
            $quarterCells.parent().removeClass("container").addClass("wasContainer");
            for(var i = 0; i < $quarterCells.length; i+=2) {
                $quarterCells.slice(i, i+2).wrapAll("<div class='container injectedTableRow'></div>");
            }
        } else if(!applyMethod && alreadyApplied){//unwrap any previously wrapped blocks:
            $(".injectedTableRow > .block").unwrap();
            $quarterCells.parent().addClass("container");
        }
    }
    //on dom ready call this
    $(function(){split4Into2();});
    //on resize call this
    $(window).resize(function(){split4Into2();});
}());
/*
 * END split4Into2();
 */