title: How to convert rows to columns using CSS?
body: <p>I'm developing a Web Application in Ionic3 framework. In my table Each item is available in different sizes.
  On mobile devices, the screen is too narrow to properly display up to 4 different sizes item.</p>
  <p>So I would like to convert rows into columns in Mobile view only.</p>
  <p>Let's take this Example</p>
  <h2>Input-</h2>
  <h2>x1 | x2 | x3 | x4 | x5</h2>
  <h2>y1 | y2 | y3 | y4 | y5</h2>
  <h2>z1 | z2 | z3 | z4 | z5</h2>
  <h2>Output-</h2>
  <h2>x1  |  y1 | z1</h2>
  <h2>x2  |  y2 | z2</h2>
  <h2>x3  |  y3 | z3</h2>
  <h2>x4  |  y4 | z4</h2>
  <h2>x5  |  y5 | z5</h2>
  <p>Is there a way of doing this in CSS?</p>