CODEWITHSUNDEEP
htmlcssmedia-queries
midhun k
midhun k

Reputation: 576

Swap 2 div's order in mobile screen

I have 2 divs.

In HD screen I am having:

<div>1</div>
<div>2</div>

But I need in mobile devices using media queries-

<div>2</div>
 <div>1</div>

I am just trying to change the order of divs in mobile screens. Any fiddle will be highly helpful

Can anyone help me to get this done? Highly Appreciated. Thanks in Advance.

Upvotes: 0

Views: 1078

Answers (2)

Patryk
Patryk

Reputation: 338

You must use parent element as a flex and try to start from mobile device:

display:flex

  @media(min-width: 768px){
    .parent{display:flex;}
    .parent .a{order: 2}
    .parent .b{order: 1}
  }
<div class="parent">
  <div class="a">2</div>
  <div class="b">1</div>
</div>

It's an answer to the question but don't stop there. Try to learn and fix my example with separate file etc. Use "flex-wrap: wrap;" to be sure that container stack

Upvotes: 1

opatut
opatut

Reputation: 6864

If you have a flexbox layout, you can use the order CSS attribute inside a media query. But this requires you to wrap your two divs into a container that has display: flex. Read the linked guide for more info on flexbox.

Upvotes: 1

Related Questions