Şu kodun sorunu nedir? (Container Row Column)

[ZakirAliyev]

.container{
max-width: 1200px;
margin: 0 auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.col-1{
width: calc(100% / 12 * 1);
padding: 16px;
}
.col-2{
width: calc(100% / 12 * 2);
padding: 16px;
}
.col-3{
width: calc(100% / 12 * 3);
padding: 16px;
}
.col-4{
width: calc(100% / 12 * 4);
padding: 16px;
}
.col-5{
width: calc(100% / 12 * 5);
padding: 16px;
}
.col-6{
width: calc(100% / 12 * 6);
padding: 16px;
}
.col-7{
width: calc(100% / 12 * 7);
padding: 16px;
}
.col-8{
width: calc(100% / 12 * 8);
padding: 16px;
}
.col-9{
width: calc(100% / 12 * 9);
padding: 16px;
}
.col-10{
width: calc(100% / 12 * 10);
padding: 16px;
}
.col-11{
width: calc(100% / 12 * 11);
padding: 16px;
}
.col-12{
width: calc(100% / 12 * 12);
padding: 16px;
}

/* for tablet */
@media screen and (max-width: 992px) and (min-width:768px) {
.col-md-1{
width: calc(100% / 12 * 1);
padding: 16px;
}
.col-md-2{
width: calc(100% / 12 * 2);
padding: 16px;
}
.col-md-3{
width: calc(100% / 12 * 3);
padding: 16px;
}
.col-md-4{
width: calc(100% / 12 * 4);
padding: 16px;
}
.col-md-5{
width: calc(100% / 12 * 5);
padding: 16px;
}
.col-md-6{
width: calc(100% / 12 * 6);
padding: 16px;
}
.col-md-7{
width: calc(100% / 12 * 7);
padding: 16px;
}
.col-md-8{
width: calc(100% / 12 * 8);
padding: 16px;
}
.col-md-9{
width: calc(100% / 12 * 9);
padding: 16px;
}
.col-md-10{
width: calc(100% / 12 * 10);
padding: 16px;
}
.col-md-11{
width: calc(100% / 12 * 11);
padding: 16px;
}
.col-md-12{
width: calc(100% / 12 * 12);
padding: 16px;
}
}

/* for large phone */
@media screen and (max-width: 768px) and (min-width:576px) {
.col-sm-1{
width: calc(100% / 12 * 1);
padding: 16px;
}
.col-sm-2{
width: calc(100% / 12 * 2);
padding: 16px;
}
.col-sm-3{
width: calc(100% / 12 * 3);
padding: 16px;
}
.col-sm-4{
width: calc(100% / 12 * 4);
padding: 16px;
}
.col-sm-5{
width: calc(100% / 12 * 5);
padding: 16px;
}
.col-sm-6{
width: calc(100% / 12 * 6);
padding: 16px;
}
.col-sm-7{
width: calc(100% / 12 * 7);
padding: 16px;
}
.col-sm-8{
width: calc(100% / 12 * 8);
padding: 16px;
}
.col-sm-9{
width: calc(100% / 12 * 9);
padding: 16px;
}
.col-sm-10{
width: calc(100% / 12 * 10);
padding: 16px;
}
.col-sm-11{
width: calc(100% / 12 * 11);
padding: 16px;
}
.col-sm-12{
width: calc(100% / 12 * 12);
padding: 16px;
}
}

/* for small phone */
@media screen and (max-width: 576px) {
.col-xs-1{
width: calc(100% / 12 * 1);
padding: 16px;
}
.col-xs-2{
width: calc(100% / 12 * 2);
padding: 16px;
}
.col-xs-3{
width: calc(100% / 12 * 3);
padding: 16px;
}
.col-xs-4{
width: calc(100% / 12 * 4);
padding: 16px;
}
.col-xs-5{
width: calc(100% / 12 * 5);
padding: 16px;
}
.col-xs-6{
width: calc(100% / 12 * 6);
padding: 16px;
}
.col-xs-7{
width: calc(100% / 12 * 7);
padding: 16px;
}
.col-xs-8{
width: calc(100% / 12 * 8);
padding: 16px;
}
.col-xs-9{
width: calc(100% / 12 * 9);
padding: 16px;
}
.col-xs-10{
width: calc(100% / 12 * 10);
padding: 16px;
}
.col-xs-11{
width: calc(100% / 12 * 11);
padding: 16px;
}
.col-xs-12{
width: calc(100% / 12 * 12);
padding: 16px;
}
}

Şu kodu internetden buldum, responsiv design yazmak için, ancak kod doğru çalışmıyor bende, ne yapa bilirim? Teşekkür ederim.

 

[lyoko]

prime flex kullanabilirsin