This is kind of embarrassing, I've been coding websites for years but in absolute
so maybe that design sense is a little too baked in.
After a little over a month with responsive the little hair I have left is getting too sparse.
Got the menu / page / footer layout figured out it's the Header that's got me.
I have this:
http://i65.tinypic.com/10nxl6r.jpg
The top & bottom rows are repeating images.
It's the text | text | logo for desktop header... I want it to go to this layout
http://i67.tinypic.com/w2dge8.jpg
So I've tried 3 columns in all kinds of configurations flex etc. but without a min width for the text element the layout change must need to be done some other way, or I'm missing something?

Do you use a table layout or maybe sub-grids to get that center text column to go to the bottom and change to a single line? I tried push / pull but I can't seem to get that to work and gone over the online examples but I'm not finding a way to get this done right, so if anyone has an idea it'd be much appreciated.

Create subgrids. Then with extra columns or rows, you might need to use some push and pull on the columns within a subgrid. It might take a little pre-planning for the initial setup. Take a look at the demo page for push and pull, and not how the large view is setup with it original push and pull settings. Its setting int he grid layout. You can tell a column to be pushed a few spans or pulled.

http://www.coffeecup.com/help/articles/ … elp-manual

http://www.coffeecup.com/help/articles/ … yout-maker

This is how I did it. I will include a link to a dropbox rsd file. The forums won't let me post files. Its actually a simple thing to do. They key thing is that when you do the larger desktop viewport, have push and pulls set there also. Its easier to sort this out by giving the columns a background color before you add elements to them. I consider your header as three sections, name, phone column and eagle. The row has three columns for each of these sections, each column with a width of 4 spans. (assuming your grid is based on 12 spans)

BUT, the column order left to right as you create the columns is name, eagle and then phone column. Select the middle column (eagle), go to layout and push it 4 spans. It will be underthe third column (phone column). Use the inspector to select this column, go back to layout and pull it 4 spans. Now you have three columns - name, phone column, eagle and in that order.

Add a subgrid in the phone column. Delete the bottom row and dived the column that was on top twice so that you have three columns. Give each column a span of 12 (the subgrid is based on the number of spans for the main grid - in this case I am assuming 12). This should cause each column to stack on top of each other. Without content, this column and the subgrid will be taller than the other columns, but you'll fix that eventually.

Create a breakpoint. Now, recall that the phone column was created last on the original row. Its at the end. Give it a span of 12. That will shoot the column below the rest and expand to the width of the grid. Now, change the spans of the name and eagle columns so that can take up the grid, such as 9 and 3. Go subgrid of the phone column, in each column, set the span to 4, or any combo so that the total of spans comes up to 12 (it does not have to be 12, but this just ensures that this subgrid of columns takes up the grid horizontally). and done!

My demo might have different sized spans for the setup, but you'll get the idea.

https://www.dropbox.com/s/pw6xd28jmzj4o … d.rsd?dl=0

in my file, go to the index_1 page....

I just thought, if the spacing does not work right for the phone column, instead of a subgrid of a row of columns, you could use flex positioning. In the desktop view, the phone column could be a flex direction of column to stack each of the elements, then at a breakpoint, a flex direction of row (after the column gets respanned to go under the other columns), and then at a mobile might be back to a flex direction of column to fit everything.

Bill, thanks... got to get a set of plans finished so I'm a couple of days out. That sounds like it should do the trick, just hadn't got too far into the sub-grids yet with the push/pull... I'll check out the d-box. I appreciate the help, and I'll get back to show you the result.

I relative positioned the Master Carpenter sub-text so that might be an option too once I get it to get into order. That and font re-sizing at the break-point but at least now I have basic method, thanks to you.

Remember when we used to have code table layout good to know we haven't gone full circle.
Nice to have a little back-up, the learning curve hump, you know what that's like.

The little websites I did were always frustrating because IE always required a hack or some sort, or - had to use tables!

I think you might be better served with a flex positioning with multiple elements. There are some slight incompatibilities with Firefox and MS IE11, but a container or a sized container can fix it. That way you can set the size or margins or the container, then just give it a space between alignment.

Hey Bill
Got an hour to play around with it this morning. Your d-load was a really helpful reference...
Found out the push/pull is actually relative positioning so don't click on any of that or it goes awry and you have to start over.

There is going to be a bit of hacking by the looks of it like the logo isn't floating right in the column... could be the flex I was trying earlier can't get that out once it's put in, so that's a pain. That and it's back to the missing min-width css on the elements I guess I'll have to try hand coding that into some header or inline css, without it the text won't work in the columns... wonder why CC didn't put that option in? You'd think with responsive it'd be a given, must be me again.

Anyway, your help was great.
If I can get it to work a wee better I'll post the solutions.