Transpose HTML table depending on device orientation

Say I have a table like this:

x A B C D E F
1 a b c d e f
2 g h i j k l

Now when device is in portrait orientation (or simply width of the window is too small) I want to display this table like this:

x 1 2 
A a g
B b h
C c i 
D d j
E e k
F f l

Is it possible to achieve this without the use of JavaScript?

Solution

You can use a grid system to create some tables and display them by breakpoint. For example using Boostrap 4 :

.row > .col, .row > [class^="col-"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-none d-sm-block">
  <div class="row">
    <div class="col">x</div>
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
    <div class="col">F</div>
  </div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">a</div>
    <div class="col">b</div>
    <div class="col">c</div>
    <div class="col">d</div>
    <div class="col">e</div>
    <div class="col">f</div>
  </div>
  <div class="row">
    <div class="col">2</div>
    <div class="col">g</div>
    <div class="col">h</div>
    <div class="col">i</div>
    <div class="col">j</div>
    <div class="col">q</div>
    <div class="col">l</div>
  </div>
</div>

<div class="d-sm-none">
  <div class="row">
    <div class="col">x</div>
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
  <div class="row">
    <div class="col">A</div>
    <div class="col">a</div>
    <div class="col">g</div>
  </div>
  <div class="row">
    <div class="col">B</div>
    <div class="col">b</div>
    <div class="col">h</div>
  </div>
  <div class="row">
    <div class="col">C</div>
    <div class="col">c</div>
    <div class="col">i</div>
  </div>
  <div class="row">
    <div class="col">D</div>
    <div class="col">d</div>
    <div class="col">j</div>
  </div>
  <div class="row">
    <div class="col">E</div>
    <div class="col">e</div>
    <div class="col">k</div>
  </div>
  <div class="row">
    <div class="col">F</div>
    <div class="col">f</div>
    <div class="col">l</div>
  </div>
</div>