title: How to properly use media query to achieve this result?
body: <p>I want to build a responsive webpage using Angular 6.I tried to do so using bootstrap but failed miserably.So ultimately I decided to go with media query. </p>
  
  <p>This is my 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>.width {
    width: 300px;
    height: 300px;
    display: inline-block;
    border: 1px solid blue;
  }
  
  .width1 {
    width: 800px;
    height: 300px;
    border: 1px solid blue;
    display: inline-block;
  }
  
  @media only screen and (max-width: 600px) {
    .width {
      background-color: black;
      width: 200px;
      height: 100px;
    }
    .width1 {
      width: 500px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid "&gt;
    &lt;div class="row"&gt;
      &lt;div class="badge width col-md-offset-1  col-lg-offset-1 col-xl-offset-1"&gt;
        Hello I am in component 1.
      &lt;/div&gt;
  
      &lt;div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1"&gt;
        Hello I am in component2.
      &lt;/div&gt;
  
      &lt;div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1"&gt;
        Hello I am in component3.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="badge width  col-md-offset-1 col-lg-offset-1 col-xl-offset-1"&gt;
        Hello I am in component 4.
      &lt;/div&gt;
  
      &lt;div class="badge width1 col-md-offset-1 col-lg-offset-1 col-xl-offset-1"&gt;
        Hello I am in component 5.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result that I am getting for a medium screen is given below and this is the result that I want:</p>
  
  <p><a href="https://i.stack.imgur.com/CPsfx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CPsfx.png" alt="The result for medium screens."></a></p>
  
  <p>However the problem arises , when I try to increase my browser resolution using 'CTRL +' . The orientation of the boxes gets jumbled up.But I want my result to look the same as it did in the medium settings.</p>
  
  <p>The following is a screenshot of the result on larger screens.
  <a href="https://i.stack.imgur.com/RHjAh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RHjAh.png" alt="The result on larger screens"></a></p>
  
  <p>How do I fix this?</p>