title: How to fold table columns into rows on mobile devices?
body: <p>I'm developing a website featuring a restaurant's menu. Each item is available in different sizes, each at a different price. This is displayed on medium and large devices using a table, with a column for each price:</p>
  
  <p><a href="https://i.stack.imgur.com/rXATK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rXATK.png" alt="Menu in columns"></a></p>
  
  <p>On mobile devices, the screen is too narrow to properly display up to 4 different sizes per product.</p>
  
  <p>So I would like to fold columns into rows, having each row starting with the column name:</p>
  
  <p><a href="https://i.stack.imgur.com/g2I4a.png" rel="noreferrer"><img src="https://i.stack.imgur.com/g2I4a.png" alt="enter image description here"></a></p>
  
  <p>Is there anything like this possible using a responsive design? I'm trying to avoid maintaining two different HTML versions of the content, one visible only on mobile, and one visible only on larger screens.</p>
  
  <p>I'm using Foundation 5, so I'm ideally looking for a solution using this grid system, but I'm open to any solution really.</p>