title: Responsive web design issue
body: <p>Layout: In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself. For a visual reference of this view, see the tablet mockup illustration below.
  <strong>I don't know how to let the 3rd section take up the entire row by itself when the it's in the second row</strong>
  Does anyone knows how achieve it?</p>
  
  <p>Thanks!</p>
  
  <p><a href="http://i.stack.imgur.com/yvju5.png" rel="nofollow">Mockup illustration</a></p>
  
  <p>Here is my HTML&amp;CSS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/********** Base styles **********/
  * {
    box-sizing: border-box;
  }
  
  h1 {
    margin-bottom: 15px;
    text-align: center;
  }
  
  .box {
   
    margin: 2em;
    
    position: relative;
  }
  
  .body {
    border: 1px solid black;
    background-color: #A52A2A;
    height: 250px;
    padding-top: 1em;
    font-family: Helvetica;
    color: white;
  
  }
  
  
  
  #boxtitle {
   background-color: #5F9EA0;
   padding:5px;
   margin: 0px;
   position: absolute;
   top:0;
   right:0;
  
  }
  
  /* Simple Responsive Framework. */
  .row {
    width: 100%;
  }
  
  /********** Large devices(Desktop) only **********/
  @media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
      float: left;
      
    }
    .col-lg-1 {
      width: 8.33%;
    }
    .col-lg-2 {
      width: 16.66%;
    }
    .col-lg-3 {
      width: 25%;
    }
    .col-lg-4 {
      width: 33.33%;
    }
    .col-lg-5 {
      width: 41.66%;
    }
    .col-lg-6 {
      width: 50%;
    }
    .col-lg-7 {
      width: 58.33%;
    }
    .col-lg-8 {
      width: 66.66%;
    }
    .col-lg-9 {
      width: 74.99%;
    }
    .col-lg-10 {
      width: 83.33%;
    }
    .col-lg-11 {
      width: 91.66%;
    }
    .col-lg-12 {
      width: 100%;
    }
    
  }
  
  /********** Medium devices(Tablet) only **********/
  @media (min-width: 768px) and (max-width: 991px) {
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
      float: left;
      
    }
    .col-md-1 {
      width: 8.33%;
    }
    .col-md-2 {
      width: 16.66%;
    }
    .col-md-3 {
      width: 25%;
    }
    .col-md-4 {
      width: 33.33%;
    }
    .col-md-5 {
      width: 41.66%;
    }
    .col-md-6 {
      width: 50%;
    }
    .col-md-7 {
      width: 58.33%;
    }
    .col-md-8 {
      width: 66.66%;
    }
    .col-md-9 {
      width: 74.99%;
    }
    .col-md-10 {
      width: 83.33%;
    }
    .col-md-11 {
      width: 91.66%;
    }
    .col-md-12 {
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Module2 Solution Responsive Layout&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Responsive Layout&lt;/h1&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-lg-4 col-md-6"&gt;
     &lt;div class="box"&gt;
      &lt;h4 id= "boxtitle"&gt;Desktop View&lt;/h4&gt;
      &lt;div class="body"&gt;
      &lt;p&gt; In the desktop view (992px and above), each of the 3 sections should take up equal amount of space on the screen. As you make the browser window wider or narrower, each section should become wider or narrower. (Hint: use percentages to define width and use the ‘float’ property. See Lecture 24). For a visual reference of this view, see the desktop mockup illustration below.&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="col-lg-4 col-md-6"&gt;
     &lt;div class="box"&gt;
      &lt;h4 id= "boxtitle"&gt;Tablet View&lt;/h4&gt;
      &lt;div class="body"&gt;
      &lt;p&gt; In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself. For a visual reference of this view, see the tablet mockup illustration below.&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
     &lt;div class="col-lg-4 col-md-6"&gt;
     &lt;div class="box"&gt;
      &lt;h4 id= "boxtitle"&gt;Mobile View&lt;/h4&gt;
      &lt;div class="body"&gt;
      &lt;p&gt;In the mobile view (equal to or less than 767px), each section should take up the entire row. For a visual reference of this view, see the mobile mockup illustration below.&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>