title: breaking point in CSS
body: <p>What I'm doing wrong?</p>
  <p>Which div will appear it doesn't depend on resolution, but order in the css file, instead.</p>
  <p>If something is missing I might delete it, because I have to cut code and put some more details :)</p>
  <p>Here is Html:</p>
  <pre><code> &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styl.css&quot;&gt;
      &lt;/head&gt;
      &lt;div class=&quot;laptop&quot;&gt;Laptop&lt;/div&gt;
      &lt;div class=&quot;ajpad_poziom&quot;&gt;Ajpad poziom&lt;/div&gt;
      &lt;div class=&quot;ajpad_pion&quot;&gt;Ajpad pion&lt;/div&gt;
      &lt;div class=&quot;cos_poziom&quot;&gt;Cos poziom&lt;/div&gt;
      &lt;div class=&quot;cos_pion&quot;&gt;Cos pion&lt;/div&gt;
      &lt;div class=&quot;tel_poziom&quot;&gt;Tel poziom&lt;/div&gt;
      &lt;div class=&quot;tel_pion&quot;&gt;Tel pion&lt;/div&gt;
  </code></pre>
  <p>Css file:</p>
  <pre><code> @media only screen and (min-width: 550px) and (orientation:landscape)) {
          .laptop{display:none;}
          .ajpad_poziom{display:none;}
          .ajpad_pion{display:none;}
          .cos_poziom{display:none;}
          .cos_pion{display:none;}
          .tel_poziom{display:block;}
          .tel_pion{display:none;}            
      }
      
      @media only screen and (min-width: 741px) and (orientation:landscape) {
          .laptop{display:none;}
          .cos_poziom{display:block;}
          .cos_pion{display:none;}
          .tel_poziom{display:none;}
          .tel_pion{display:none;}            
      }
      
      
      
      
      @media only screen and (min-width: 1000px) and (orientation: landscape) {
          .laptop{display:none;}
          .cos_poziom{display:none;}
          .cos_pion{display:none;}
          .tel_poziom{display:none;}
          .tel_pion{display:none;}
          
      }
      
      /* Extra large devices (large laptops and desktops, 1200px and up) 
      portrait
      
      */
      @media only screen and (min-width: 1400px) {
          .laptop{display:block;}
          .cos_poziom{display:none;}
          .cos_pion{display:none;}
          .tel_poziom{display:none;}
          .tel_pion{display:none;}
      }
  </code></pre>