Search code examples
htmlcssmedia-queries

Change div order when going from mobile to desktop

I have the following HTML structure:

<div class="clearfix">
    <div class="col-xs-12 col-md-7>
        <div>
            div A
        </div>
        <div>
            div B
        </div>
    </div>
    <div class="col-xs-12 col-md-5>
        <div>
            div C
        </div>
        <div>
            div D
        </div>
    </div>
</div>
<div>
    div E
</div>

Apparently, the result is like:

div A        div C
div B        div D
div E

Now, what I want is to have the following result in mobile:

div A
div C
div B
div D
div E

How may I achieve that by using media queries? Is that possible? I have implemented the desktop-first approach, but in case it is easier to start from a mobile-first approach and implement then the above desktop structure, it is fine.

Solution

  • You cannot change the order of columns in smaller screens but you can do that in large screens.

    So change the order of your columns.

    So in mobile main content is displayed first.

    By using col-lg-push and col-lg-pull we can reorder the columns in large screens

    Example