FlexBox Grid

by Alex

HTML

<div class="grid">
    <div class="grid-cl_1-2 grid-md-cl_1-3">
        <span class="hide-md">1-2</span>
        <span class="hide-sm">1-3</span>
    </div>
    <div class="grid-cl_1-2 grid-md-cl_1-3">
        <span class="hide-md">1-2</span>
        <span class="hide-sm">1-3</span>
    </div>
    <div class="grid-cl_1-4 grid-md-cl_1-3">
        <span class="hide-md">1-4</span>
        <span class="hide-sm">1-3</span>
    </div>
    <div class="grid-cl_1-4 grid-md-cl_1-3">
        <span class="hide-md">1-4</span>
        <span class="hide-sm">1-3</span>
    </div>
    <div class="grid-cl_1-2 grid-md-cl_1-3">
        <span class="hide-md">1-2</span>
        <span class="hide-sm">1-3</span>
    </div>
    <div class="grid-cl_1-3 grid-md-cl_1-3">
        <span class="hide-md">1-3</span>
        <span class="hide-sm">1-3</span>
    </div>
    <div class="grid-cl_2-3 grid-md-cl_1-2">
        <span class="hide-md">2-3</span>
        <span class="hide-sm">1-2</span>
    </div>
    <div class="grid-cl grid-md-cl_1-2">
        <span class="hide-md">1-1</span>
        <span class="hide-sm">1-2</span>
    </div>
</div>

CSS

html {
	font-family: sans-serif;
}
.grid {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
[class^=grid-cl] {
    background: #eee;
    border: 1px solid #ddd;
    padding: 5px;
	box-sizing: border-box;
}
.grid-cl {
	-webkit-flex-basis: 100%;
	flex-basis: 100%;
}
.grid-cl_1-2 {
	-webkit-flex-basis: 50%;
	flex-basis: 50%;
}
.grid-cl_1-3 {
	-webkit-flex-basis: 33.33%;
	flex-basis: 33.33%;
}
.grid-cl_2-3 {
	-webkit-flex-basis: 66.66%;
	flex-basis: 66.66%;
}
.grid-cl_1-4 {
	-webkit-flex-basis: 25%;
	flex-basis: 25%;
}
.grid-cl_3-4 {
	-webkit-flex-basis: 75%;
	flex-basis: 75%;
}
@media (max-width: 1200px) {
    .hide-sm {
        display: none;
    }
}
@media (min-width: 1200px) {
    .hide-md {
        display: none;
    }	
    .grid-md-cl {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }
    .grid-md-cl_1-2 {
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
    }
    .grid-md-cl_1-3 {
        -webkit-flex-basis: 33.33%;
        flex-basis: 33.33%;
    }
    .grid-md-cl_2-3 {
        -webkit-flex-basis: 66.66%;
        flex-basis: 66.66%;
    }
    .grid-md-cl_1-4 {
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
    }
    .grid-md-cl_3-4 {
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
    }
}