HTML
<div class="container">
<h1>Responsive Boxes</h1>
<h4>Resize the browser window to see how the content respond to the resizing</h4>
<p id="desktop">--- This is how it's look in the DESKTOP screen ---</p>
<p id="tablet">--- This is how it's look in the TABLET screen ---</p>
<p id="smartphone">This is how it's look in the SMARTPHONE screen</p>
<div class="row">
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
<div class="col-1 col-t-2 col-m-3 box">col-1<br/>col-t-2<br/>col-m-3</div>
</div><!-- row -->
<div class="row">
<div class="col-2 col-t-6 box">col-2<br/>col-t-6</div>
<div class="col-2 col-t-6 box">col-2<br/>col-t-6</div>
<div class="col-4 col-t-12 box">col-4<br/>col-t-12</div>
<div class="col-2 col-t-6 box">col-2<br/>col-t-6</div>
<div class="col-2 col-t-6 box">col-2<br/>col-t-6</div>
</div><!-- row -->
<div class="row">
<div class="col-3 box">col-3</div>
<div class="col-9 box">col-9</div>
</div><!-- row -->
<div class="row">
<div class="col-4 box">col-4</div>
<div class="col-8 box">col-8</div>
</div><!-- row -->
<div class="row">
<div class="col-5 box">col-5</div>
<div class="col-7 box">col-7</div>
</div><!-- row -->
<div class="row">
<div class="col-6 box">col-6</div>
<div class="col-6 box">col-6</div>
</div><!-- row -->
<div class="row">
<div class="col-7 box">col-7</div>
<div class="col-5 box">col-5</div>
</div><!-- row -->
<div class="row">
<div class="col-8 box">col-8</div>
<div class="col-4 box">col-4</div>
</div><!-- row -->
<div class="row">
<div class="col-9 box">col-9</div>
<div class="col-3 box">col-3</div>
</div><!-- row -->
<div class="row">
<div class="col-10 box">col-10</div>
<div class="col-2 box">col-2</div>
</div><!-- row -->
<div class="row">
<div class="col-11 box">col-11</div>
<div class="col-1 box">col-1</div>
</div><!-- row -->
<div class="row">
<div class="col-12 box">col-12</div>
</div><!-- row -->
<br/>
<br/>
<p style="display: block">if col-t- or col-m- didn't set, boxes will have 100% width in tablet and phone screen. </p>
</div><!-- container -->
CSS
body {
margin: 0;
background-color: #333;
}
* {
text-align: center;
box-sizing: border-box;
color: orange;
}
p {
display: none;
}
.container {
max-width: 960px;
margin: auto;
padding: 10px;
overflow: 0 auto;
}
.row {
width: 100%;
clear: both;
}
/* if col-t- or col-m- didn't set: */
[class*="col-"] {
width: 100%;
}
/* For mobile phones: */
p#smartphone {display: block;}
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
@media only screen and (min-width: 500px) {
/* For tablets: */
p#smartphone {display: none;}
p#tablet {display: block;}
.col-t-1 {width: 8.33%;}
.col-t-2 {width: 16.66%;}
.col-t-3 {width: 25%;}
.col-t-4 {width: 33.33%;}
.col-t-5 {width: 41.66%;}
.col-t-6 {width: 50%;}
.col-t-7 {width: 58.33%;}
.col-t-8 {width: 66.66%;}
.col-t-9 {width: 75%;}
.col-t-10 {width: 83.33%;}
.col-t-11 {width: 91.66%;}
.col-t-12 {width: 100%;}
}
@media only screen and (min-width: 900px) {
/* For desktop: */
p#smartphone {display: none;}
p#tablet {display: none;}
p#desktop {display: block;}
.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%;}
}
.box {
border: 1px solid orange;
border-radius: 5px;
float: left;
background-color: #333;
color: orange;
margin: 0px;
padding: 10px;
}
