The order in which <span> blocks start a new line

Hi,

I'm having difficulty figuring out how to make my elements move when the browser window shrinks. I don't know if this is a beginner question or incredibly advanced! I'm an experienced coder, but relatively new to CSS layouts.

A simple example is as follows:

<span class="outer">
    <span class="inner">left column</span>
</span>
<span class="outer">
    <span class="inner">mid 1</span>
    <span class="inner">mid 2</span>
    <span class="inner">mid 3</span>
</span>
<span class="outer">
    <span class="inner">right 1</span>
    <span class="inner">right 2</span>
</span>

When the window is too small to display all of them in a row, I want the outer columns to stay next to each-other, and the inner elements (mid1, mid2, mid3 and right1, right1) to wrap round, staying in their respective columns.

If the window shrinks further, I want the outer columns to wrap on top of each other creating a column of elements.

If I use position:inline-block for the spans, then the outer spans wrap first, then the inners. I want this to happen the other way round. Any suggestions? I've found nothing online about this.