Adapting responsive tables using media queries

I am trying to adapt an existing responsive table that was made with css/media queries in an ASP.NET web application. I found the model I'm basing my table off of at this website. The demo for this table can be seen here.

As you can see, as the window is shrunk, the table eventually breaks down each row into its own sort of chart. I would like to do the same thing, except have each column be its own chart (i.e) the first chart would be a chart of all the last names, etc. Does anyone have any ideas?

below are the media queries that change the format of the chart once the window size is changed.

<style>

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    /*th:nth-of-type(1):before { content: "First Name"; }*/
    td:nth-of-type(1):before { content: "Monday"; }
    td:nth-of-type(2):before { content: "Tuesday"; }
    td:nth-of-type(3):before { content: "Wednesday"; }
    td:nth-of-type(4):before { content: "Thursday"; }
    td:nth-of-type(5):before { content: "Friday"; }
    td:nth-of-type(6):before { content: "Saturday"; }
    td:nth-of-type(7):before { content: "Sunday"; }
}

/* Smartphones (portrait and landscape) ----------- */
@@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px; }
    }

/* iPads (portrait and landscape) ----------- */
@@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 495px;
    }
}

</style>

thanks!