Responsive HTML Columns

#columns#html#responsive

HTML

<div class="spr_row">

	<div class="spr_column spr_col-6">
    	<div class="spr_column-inner ">
        	<div class="spr_wrapper">
            	<div class="spr_content_element">Col 6</div>
           </div>
        </div>
    </div>
	<div class="spr_column spr_col-6">
    	<div class="spr_column-inner ">
        	<div class="spr_wrapper">
           	<div class="spr_content_element">Col 6</div>
           </div>
        </div>
    </div>

</div>

CSS

.spr_row::before, .spr_row::after {
    content: " ";
    display: table;
}
.spr_column {
	position: relative;
	min-height: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.spr_column>.spr_column-inner {
    box-sizing: border-box;
    width: 100%;
	border:solid 1px #000;
}
.spr_column-inner::after, .spr_column-inner::before {
    content: " ";
    display: table;
}
.spr_column-inner::after, .spr_row::after {
    clear: both;
}

.spr_col-12, .spr_column {
    width: 100%;
}
@media (min-width: 768px){
.spr_col-10 {
    width: 83.33333333%;
}
}
@media (min-width: 768px){
.spr_col-9 {
    width: 75%;
}
}
@media (min-width: 768px){
.spr_col-8 {
    width: 66.66666667%;
}
}
@media (min-width: 768px){
.spr_col-7 {
    width: 58.33333333%;
}
}
@media (min-width: 768px){
.spr_col-6 {
    width: 50%;
}
}
@media (min-width: 768px){
.spr_col-5 {
    width:41.66666667%;
}
}
@media (min-width: 768px){
.spr_col-4 {
    width: 33.33333333%;
}
}
@media (min-width: 768px){
.spr_col-3 {
    width: 25%;
}
}
@media (min-width: 768px){
.spr_col-2 {
	width: 16.66666667%;
}
}
@media (min-width: 768px){
.spr_col-1 {
	width:8.33333333%;
}
}
@media (min-width: 768px){
.spr_column {
    float: left;
}
}