Есть ли способ в CSS заставить элементы вести себя как на картинке справа? Порядок элементов неЭто важно, но плитки должны занимать пространство снизу вверх, а не сверху вниз, когда человек изменяет размеры страницы.

  NORMAL         DESIRED
|---------|    |---------|
| A B C D |    | I       |
| E F G H |    | E F G H |
| I       |    | A B C D |
|---------|    |---------|

Образец кода:

    

      
        .container {
          margin:10px;
          border:1px solid black;
          float:left;
        }

        .tile {
          width:100px;
          height:100px;
          border:1px solid black;
          margin:5px;
          float:left;
          font-size: 50px;
          text-align: center;
          line-height: 100px;
          vertical-align: middle; 
        }

      

    
    
        
          <span class="tile">1</span>
          <span class="tile">2</span>
          <span class="tile">3</span>
          <span class="tile">4</span>
          <span class="tile">5</span>
          <span class="tile">6</span>
          <span class="tile">7</span>
          <span class="tile">8</span>
          <span class="tile">9</span>