html - Render elements vertically and float to left when it's "overflowing" container -

i have design in this picture

basiclly, have container fixed height(fx, 300px). need render list vertically width: 33%, , if list long, over-flowing list should float left.

.container {    width: 940px;    height: 300px;    margin: auto;    background: #dedede;    margin-top: 30px;  }  .item {    width: 31.2%;    background-color: #b49ad9;    margin-bottom: 10px;    padding: 10px;  }  .item > div {    display: inline-block;    vertical-align: top;  }  .item ul {    margin: 0;    padding: 0;    list-style: none;  }  .alpha {    font-weight: bold;    font-size: 2em;  }

<h2>the c container should float left , place next a</h2>  <div class="container">    <div class="item">      <div class="alpha">a</div>      <div class="words">        <ul>          <li>alll</li>          <li>aoooo</li>          <li>auuuuu</li>        </ul>      </div>    </div>    <div class="item">      <div class="alpha">b</div>      <div class="words">        <ul>          <li>blll</li>          <li>boooo</li>          <li>buuu</li>          <li>baaaaa</li>          <li>boppoe</li>          <li>buuuuu</li>          </ul>      </div>    </div>    <div class="item">      <div class="alpha">c</div>      <div class="words">        <ul>          <li>clll</li>          <li>coooo</li>          <li>cuuu</li>          <li>coppoe</li>          <li>cuuuuu</li>          </ul>      </div>    </div>  </div>

the purple box c should move beside a

how can achieve this? both css , js welcome :)

ps: needs support @ least ie9... ...

you can use flexbox:

.container {   display: flex;          /* magic begins*/   flex-flow: column wrap; /* multiline column layout */ } 

.container {    width: 100%;    max-width: 940px;    height: 300px;    margin: auto;    background: #dedede;    margin-top: 30px;    display: flex;          /* magic begins*/    flex-flow: column wrap; /* multiline column layout */  }  .item {    width: 31.2%;    background-color: #b49ad9;    margin-bottom: 10px;    padding: 10px;  }  .item > div {    display: inline-block;    vertical-align: top;  }  .item ul {    margin: 0;    padding: 0;    list-style: none;  }  .alpha {    font-weight: bold;    font-size: 2em;  }

<h2>the c container should float left , place next a</h2>  <div class="container">    <div class="item">      <div class="alpha">a</div>      <div class="words">        <ul>          <li>alll</li>          <li>aoooo</li>          <li>auuuuu</li>        </ul>      </div>    </div>    <div class="item">      <div class="alpha">b</div>      <div class="words">        <ul>          <li>blll</li>          <li>boooo</li>          <li>buuu</li>          <li>baaaaa</li>          <li>boppoe</li>          <li>buuuuu</li>        </ul>      </div>    </div>    <div class="item">      <div class="alpha">c</div>      <div class="words">        <ul>          <li>clll</li>          <li>coooo</li>          <li>cuuu</li>          <li>coppoe</li>          <li>cuuuuu</li>        </ul>      </div>    </div>  </div>