title: CSS and html layout
body: <p>I have this html and css layout. I want to make it when reaching tablet with media query and phone to show like in those 2 images. So I have in normal (desktop mode) 4 products all of them in the same line. When the view reaches tablet - 1199 pixels I want those 4 products to be each 2 on a separate line, so 2 lines with 2 products. On the phone mode 768 pixels I want each product to be on its line with the width full like the wrapper. </p>
  
  <p>Here is the code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
    padding: 0px;
  }
  
  
  /* Header */
  
  .header {
    background-color: yellow;
    width: 100%;
    margin: 0 auto;
  }
  
  .wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .logo {
    background-color: grey;
    width: 150px;
    height: 50px;
    margin-top: 20px;
    float: left;
  }
  
  .info {
    background-color: grey;
    width: 285px;
    height: 50px;
    margin-top: 20px;
    float: right;
  }
  
  .clear {
    clear: both;
  }
  
  .menu {
    background-color: grey;
    width: 1200px;
    height: 50px;
    margin-top: 20px;
  }
  
  
  /*  */
  
  
  /* Nav-Bar */
  
  .nav-bar {
    background-color: lightgray;
    width: 1200px;
    height: 340px;
    margin-top: 20px;
  }
  
  
  /*  */
  
  
  /* Product grid */
  
  .product1,
  .product2,
  .product3 {
    background-color: lightgray;
    width: 285px;
    height: 320px;
    margin-top: 20px;
    margin-right: 20px;
    float: left;
  }
  
  .product4 {
    background-color: lightgray;
    width: 285px;
    height: 320px;
    margin-top: 20px;
    float: left;
  }
  
  
  /*  */
  
  
  /* Bottom Part */
  
  .content-area {
    background-color: lightgray;
    width: 100%;
    height: 420px;
    margin-top: 20px;
  }
  
  
  /*  */
  
  
  /* Footer */
  
  .footer-area {
    background-color: gray;
    width: 100%;
    height: 50px;
    margin-top: 20px;
  }
  
  
  /*  */
  
  
  /* Responsive */
  
  @media screen and (max-width: 1199px) {
    .product1,
    .product2,
    .product3,
    .product4 {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Home View&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="../style/homestyle.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Header --&gt;
    &lt;div class="header"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="logo"&gt;&lt;/div&gt;
        &lt;div class="info"&gt;&lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;div class="menu"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--  --&gt;
  
    &lt;!-- NavBar --&gt;
    &lt;div class="header"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="nav-bar"&gt;&lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--  --&gt;
  
    &lt;!-- Product Grid --&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="def1"&gt;
        &lt;div class="product1"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="def2"&gt;
        &lt;div class="product2"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="def3"&gt;
        &lt;div class="product3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="def4"&gt;
        &lt;div class="product4"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!--  --&gt;
  
    &lt;!-- Bottom Part --&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="content-area"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Footer --&gt;
    &lt;div class="header"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="footer-area"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The CSS<a href="https://i.stack.imgur.com/kuTHI.jpg" rel="nofollow noreferrer">Tablet</a> : <a href="https://i.stack.imgur.com/PG4oU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PG4oU.jpg" alt="Phone"></a><br>
  I attached the images needed for the layout. Please help!</p>