Need your help on responsive page

Question

I'm trying to create a responsive website which has layout as below

1. On the desktop, there are 2 column, first for introduction and second for login form (or main content), they are same height
2. On the smaller screen, there is only 1 column, with main content at above and introduction section at below.

I created a DOM

<div class="page">
    <div class="welcome">
        <span>Welcome to my page</span>
    </div>
    <div class="main">
        <div class="header">
        </div>
        <div class="content">
        </div>
    </div>
</div>

I used display:table and display:table-cell for Desktop and everything worked well, however I don't know how to display on the smaller screen as the mockup

Please give me any suggestions.

Answer 1

You an use

1) Flexbox, to reverse column order. According to caniuse.com[http://caniuse.com/#search=flexbox], it's got decent support i.e. if you're okay with opera mini users missing out, but keep in mind its global usage is only 2.85%.

CSS

.page {
    display: flex;
    flex-direction: row;
    }

@media (max-width:500px) {
    .page {
        flex-direction: column-reverse;
        }
    }

Demo: http://dabblet.com/gist/7218862

Recommended reading regarding flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

2) Display: Table. This has much better support (http://caniuse.com/#search=display%3A%20table), even supported in Opera Mini from version 5 onward. The only downside is you need to have extra wrappers elements around .welcome & .main. Small price to pay.

Markup:

<div class="page">
    <div class='bottom'>
        <div class="welcome">
            <span>Welcome to my page</span>
        </div>
    </div>
    <div class='top'>
        <div class="main">
            <div class="header">
            </div>
            <div class="content">
            </div>
        </div>
    </div>
</div>

CSS:

@media (max-width: 500px) {
    .page {
        display: table;
        }
    .top {
        display: table-header-group; 
        }
    .bottom {
        display: table-footer-group;
        }
    }

Demo: http://dabblet.com/gist/7219553

Here's an article with more information http://www.mikitamanko.com/blog/2012/11/20/vertical-reordering-of-blocks-with-css-or-how-to-swap-two-elements-using-css/