title: How to control the order in which elements float on window resize, inside a table
body: <p>So I have these tables that I'm trying to make for an email template, and these three columns which have a float property in order to stack them one bellow another when I resize the window. </p>
  
  <p>The thing is that while it looks good at maximum size and minimum size (at maximum they are next to each other, at minimum they are one bellow another, as intended), in between the third column moves below the first while the second remains next to the first, and after further resizing the second column then changes it's position below the first column and the third column moves further away from the second one. What I wish to know is if there is a way to make them move in a certain order, like the first one to move below should be the second column, and only after that the third. Or even better would be if they moved all at once!</p>
  
  <p>Also, I am very curious as to why are the texts moving upward inside the cells when I give them the float property, me preferring them to remain vertically aligned in the center, as they were before making them float. </p>
  
  <p>Note: because this is intended for emails, I had to use all my css styling inline as the server I use does not recognize the style tag. Also the max width for the table is of 600px</p>
  
  <pre><code>&lt;table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td class="placeholder" style="width: 180px;float:left;"&gt;
  Description:
  &lt;/td&gt;
  &lt;td class="links" style="width: 275px; float:left;"&gt;
  &lt;a href="#" target="_blank"&gt;very long link&lt;/a&gt;
  &lt;/td&gt;
  &lt;td class="buttons" style="width: 85px; float:left;"&gt;
  &lt;a href="#" target="_blank" "=""&gt;button&lt;/a&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>