title: How to make this as block elements?
body: <p>The below code acts like a table perfectly. When I shrink the page, I want it to first name-foo first and below that last name - foo last. I am stuck here. I understand that I need to use "@media 
  only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px)" here. But I am lost after that. Thanks in advance.    </p>
  
  <pre><code>&lt;div id="Main"&gt;
      &lt;section id="sub"&gt;
          &lt;div&gt;First Name&lt;/div&gt;
          &lt;div&gt;Last Name&lt;/div&gt;
          &lt;div&gt;Middle Name&lt;/div&gt;
      &lt;/section&gt;
      &lt;section id="sub2"&gt;
          &lt;div&gt;foo first&lt;/div&gt;
          &lt;div&gt;foo Last&lt;/div&gt;
          &lt;div&gt;foo Middle&lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>