Wed, 2016-06-15 10:30
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>
If the browser is wide enough, then all 6 elements will display in a horizontal row, which is great.
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.
