CodePen

HTML

            
              <div class="navigation">
  Navigation
</div>

<div class="blue-box">
 Blue box
</div>

<div class="left-column">
  <div class="dark-grey-text">
  Dark grey text
  </div>
  <div class="grey-text">
  Grey text
  </div>
</div>

<div class="green-box">
  Green box
</div>

<div class="pink-box">
  Pink box
</div>

<div class="footer">
  Footer
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .navigation {
  clear: both;
  height: 50px;
  margin-bottom: 20px;
  background-color: black;
  color: white;
}

.blue-box {
  float: right;
  width: 20%;
  height: 150px;
  margin-bottom: 20px;
  background-color: blue;
}

.left-column {
  float: left;
  width: 75%;
}
.dark-grey-text {
  height: 180px;
  background: black;
  color: white;
}

.grey-text {
  height: 180px;
  margin-top: 20px;
  margin-bottom: 20px;
  background: gray;
  color: white;
}

.pink-box {
  float: right;
  width: 10%;
  height: 150px;
  background-color: pink;
}

.green-box {
  float: right;
  width: 10%;
  height: 150px;
  background-color: green;
}



.footer {
  clear: both;
  height: 50px;
  background-color: black;
  color: white;
}

@media all and (max-width: 480px)  {
		.blue-box {
		  float: none;
			width: 100%;
		}
    .left-column {
      width: 100%;
      float: none;
    }
    .pink-box, .green-box {
      float: left;
      width: 50%;
      margin-bottom: 20px;
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................