title: How to create responsive blocks by using just CSS and HTML
body: <p>Check: <a href="http://apkapp.in/software/view/43908225?download=ChatAdda.apk" rel="nofollow noreferrer">http://apkapp.in/software/view/43908225?download=ChatAdda.apk</a></p>
  
  <p>I want to create a responsive block as shown below:</p>
  
  <p>PC View:</p>
  
  <p><a href="https://i.stack.imgur.com/vzSpz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vzSpz.png" alt="PC view"></a></p>
  
  <p>Mobile View:</p>
  
  <p><a href="https://i.stack.imgur.com/0a8Q5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0a8Q5.png" alt="Mobile View"></a></p>
  
  <p>For doing this, I am using the following CSS and HTML:</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>    &lt;style&gt;
      @media only screen and (min-width:1220px){ #mobile,.mobile{display:none} } 
      @media only screen and (max-width:1220px){ #pc,.pc{display:none} #mobile,.mobile{display:block} } 
      @media handheld{ #pc,.pc{display:none} #mobile,.mobile{display:block} }
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="pc text"&gt;
      &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;table&gt;&lt;tr&gt;&lt;td width="100px"&gt;&lt;span class="thumb"&gt;&lt;img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /&gt;&lt;/span&gt;&lt;/td&gt;&lt;td width="*"&gt;&lt;h2&gt;ChatAdda&lt;/h2&gt;
      &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Size : 13.11 MB&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Downloads : 12&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Category :&lt;a href="http://apkapp.in/software/list/1430431"&gt; Communication&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Price : Free&lt;/strong&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
      &lt;td&gt;&lt;script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"&gt;&lt;/script&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
      &lt;/div&gt;
      
      &lt;div class="mobile text"&gt;
      &lt;table&gt;&lt;tr&gt;&lt;td width="100px"&gt;&lt;span class="thumb"&gt;&lt;img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /&gt;&lt;/span&gt;&lt;/td&gt;&lt;td width="*"&gt;&lt;h2&gt;ChatAdda&lt;/h2&gt;
      &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Size : 13.11 MB&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Downloads : 12&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Category :&lt;a href="http://apkapp.in/software/list/1430431"&gt; Communication&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Price : Free&lt;/strong&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="mobile text"&gt;&lt;script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"&gt;&lt;/script&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the issue is that I am using <code>@media</code> CSS to show the blocks in mobile and PC views by using <code>display:none</code> to the other view which makes me to use the ad code (<code>&lt;script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"&gt;&lt;/script&gt;</code>) for the second block to use two times. How do I display the same using the ad code only once and also without using tables?</p>