title: How to create a 3 column (ul, li) header that (responsive) collapse one below another?
body: <p><strong>The fiddle is <a href="http://jsfiddle.net/riffaz/734os9yf/" rel="nofollow">HERE</a></strong></p>
  
  <p>I have a very odd HTML structure old website.
  Client is asking me to make it responsive.</p>
  
  <p>I need this website need to behave responsive from the breaking point 768px.</p>
  
  <p>I've changed the HTML structure bit as follow:</p>
  
  <pre><code>&lt;div id="tm_container"&gt;
      &lt;div id="backtotop"&gt;&lt;/div&gt;
      &lt;div class="tm_header_file"&gt;
          &lt;div class="social_bar"&gt;
              &lt;div style="clear:both;"&gt;&lt;/div&gt;
              &lt;div class="top-header"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;img src="#"&gt;&lt;li&gt;
                      &lt;li&gt;&lt;img src="#"&gt;&lt;li&gt;
                      &lt;li&gt;&lt;img src="#"&gt;&lt;li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
      &lt;div class="tm_menu_desktop"&gt;
          &lt;!-- desktop navigation --&gt;
      &lt;/div&gt;
  
      &lt;div class="tm_menu_mobile"&gt;
          &lt;!-- mobile navigation --&gt;
      &lt;/div&gt;
  
      &lt;div class="tm_content"&gt;
          &lt;!-- Contents --&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  
      &lt;div class="tm_footer"&gt;
          &lt;!-- Footer code --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Already I have these CSS codes in <code>style.css</code></p>
  
  <pre><code>.top-header ul li { float: left; width: 13.2%; padding: 21px 4px 0;}
  .top-header ul li:first-child { width: 12.75%; padding: 0;}
  .top-header ul li:last-child { width: 73.1%; padding: 0;}
  .top-header ul li a img { width: 100%;}
  </code></pre>
  
  <p>and then I created the media query as follow in <code>responsive.css</code>:</p>
  
  <pre><code>@media (max-width: 768px) { /*  responsive - starts from iPad portrait view */      
          #tm_container { padding: 0 1%;}
          .tm_menu_desktop { display: none;}
          .tm_header_file { width: 100%; }
          .tm_content { display: inline-block; width: 100%; }
          .top-header ul li, .top-header ul li:first-child { width : auto;}
          .top-header ul li a img { width : 132px; }
          .top-header ul li:last-child { display: none; } 
      }
  </code></pre>
  
  <p>After I added the above code in <code>responsive.css</code> the body content and footer are ok. those are responsive now.</p>
  
  <p>what I want to achieve :</p>
  
  <ol>
  <li><code>3rd li</code> in the <code>top-header</code> class should be disappear - done</li>
  <li><code>2nd and 1st</code> li in the <code>top-header</code> class should be <code>centered</code> in the same line during the collapse in 768 breaking point - NOT done</li>
  <li><code>2nd li</code> should be go below to the 3rd li in the <code>top-header</code> class and should be both centered - NOT done</li>
  </ol>
  
  <p>for now <code>1st &amp; 2nd</code> li are in the left side/floting left next to each other. how can I get those centered?
  And how about 3rd point?</p>
  
  <p><strong>The fiddle is <a href="http://jsfiddle.net/riffaz/734os9yf/" rel="nofollow">HERE</a></strong></p>