Necesito saber como aplicar en media queries a cada movil asignando las clases como es visto en boostrap ( Ojo Esta practica la quiero hacer a pie sin boostrap como tal ), en fin como aplicar las class llamadas comunmente asi : .col-xs, .col-sm, .col-md, .col-lg ?
* {
box-sizing: border-box;
margin: 0;
/*padding: 0;*/
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
background: ;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
/*--------------ESTO ES UNA PRUEBA MIA( TRATANDO DE BUSCAR EL PROBLEMA--------------------*/
.box-1{background: orange;float: right;}
.box-2{background: darkgreen;}
.box-3{background: darkred;}
.box-4{background: darkblue;}
.box-5{background: teal;}
.box-1,.box-2,.box-3,.box-4,.box-5{
color: white;
font-size: 1.12em;
/*display: inline-block;*/
}
.box-1,.box-5{padding: 26px;text-align: center;}
@media (max-width: 600px){
.col-5{
width: 2%;
}
.col-7{
}
.box-1{
background: red;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
<hr/>
**Pueden usar este diseño para la explicacion **
<!--ESTO ES UNA PRUEBA, EN BUSCA DE MI PROBLEMA -->
<section>
<div class="container">
<div class="box-1 col-10">
BOX-1 : Esto es el HEADER
</div>
<div class="box-2 col-2">
BOX-2 : Menu de la Pagina
</div>
<div class="box-3 col-7">
BOX-3 : Esto es el Container
</div>
<div class="box-5 col-3">
BOX-5 : Otro Contenido de la Web
</div>
<div class="box-4 col-2">
BOX-4 : Publicidades
</div>
</div>
</section>
</body>
</html>