CODEWITHSUNDEEP
htmlcssmedia-queries
Unknown developer
Unknown developer

Reputation: 5920

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.

Upvotes: 0

Views: 65

Answers (2)

Poli
Poli

Reputation: 109

If you are using bootstrap, the existing classes like col-sm-12 or col-md-2 and so should do it automatically with the default screen parameter of bootstrap, i think it becomes more difficult using div and media queries

Upvotes: 0

Mile Mijatović
Mile Mijatović

Reputation: 3177

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

Upvotes: 1

Related Questions