Dimitriy

Можно и через Modernizr

Modernizr.load([
  {
    test: 320 >= window.screen.width,
    yep:   "big.js",
    nope: ["small.js", "small.css"]
  }
]);

h2 {
  margin: 0;
}

Как вариант можно и так, пример без учета кросса:

body > div {
            display: flex;
            flex-flow: column wrap;
            height: 600px;
            align-content: flex-start;
        }
        div > div  {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            margin: 10px;
        }
        div > div:nth-of-type(4)  {
            height: 300px;
        }
        div > div:nth-of-type(5)  {
            height: 200px;
        }

Данный пример завязан на высоту основного блока, можно не переварачивать ось, и поменять порядок блоков, тогда буде привязка к ширине.

Ну и, ограничение, конечно, в поддержки браузерами flex`а

На счет кросса не уверен, последние FF, Chrome и IE8+ работают

.wrap{
        position: relative;
    }
    .wrap-scroll{
        margin-left: 100px;
        width: 300px;
        overflow: auto;
    }
    table{
        width: 500px;
    }
    table td{
        width: 100px;
        border: 1px solid #ccc;
    }
    table tr td:first-child{
        width: 100px;
        position: absolute;
        left: 0px;
        z-index: 100;
    }

<div class="wrap">
    <div class="wrap-scroll">
        <table>
            <tbody>
                <tr>
                    <td>Col-1</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>Col-2</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>