CODEWITHSUNDEEP
htmlcss-floatcss-position
Joginder
Joginder

Reputation: 33

Changing the order of elements according to screen size

I have two floating <div>'s .a and .b.

Both <div>'s are floated to left, So that they both are aligned horizontally with 50% width for each.

But on small screen I want both <div>'s to be aligned vertically with full width but second <div> .b must appear first and first <div> .a must appear under <div> .b.

Also I can't set height on both <div>'s since their content is dynamic.

Following is sample code:

.a{width:50%; float:left;background-color:#CCCCCC}
.b{width:50%; float:left; background-color:#FFC;}

@media only screen and (min-width: 320px) and (max-width: 480px) {
.a{width:100%; float:left; background-color:#CCCCCC}
.b{width:100%; float:left; background-color:#FFC;}
}
<div class="a">This is first div</div>
<div class="b">this is Second div</div>

Upvotes: 3

Views: 108

Answers (3)

Arthur Camara
Arthur Camara

Reputation: 313

Alright, let's get into it. You want them to be left aligned in large resolutions, but inverted in mobile resolutions.

Mobile version: Let's take a mobile-first approach. This means we will support the mobile styles as the default, and include large-screen styles in the media query. It seems much simpler and more reasonable, since your divs can be static in that case. Then, it makes a lot more sense to have the second div come first.:

<div class="section">Second div</div>
<div class="section">First div</div>

Then, there's not much to style, just regular simple css for the mobile version. Mainly this: 

.section {
    background-color: #f2f2f2;
}

Check an example here: http://jsfiddle.net/arthurcamara/3yv2urkm/

Large screen version: I also took the freedom to make the code more semantic. So I added separate classes lg-right and lg-left to the divs:

<div class="section lg-right">Text, second div</div>
<div class="section lg-left">Text, first div </div>

Now it comes to adding your media query.

@media only screen and (min-width: 481px) {
    .section {
        width: 50%;
    }
    .lg-right {
        float: right;
    }
    .lg-left {
        float: left;
    }
}

See final working version here: http://jsfiddle.net/arthurcamara/3yv2urkm/2/

Also, you might want to consider using a framework such as Foundation. They already provide this functionality in a much broader and flexible way then the one I presented.

Upvotes: 1

T J
T J

Reputation: 43156

You can use the order property of CSS3 flexbox module as follows:

HTML:

<div class="flex-parent">
  <div class="flex-child a">This is first div</div>
  <div class="flex-child b">this is Second div</div>
</div>

CSS:

.flex-parent {
  display:flex;
  flex-wrap: wrap;
  width:100%;
}
.flex-child {
  flex:1;
}
.a {
  background-color: #CCCCCC
}
.b {
  background-color: #FFC;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .flex-child {
    flex-basis:100%;
  }
  .a {
    order:2;
  }
  .b {
    order:1;
  }
}

JSFiddle Demo

flexbox browser support@ caniuse

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

fiddle demo

Invert the HTML order:

<div class="b">this is Second div</div>
<div class="a">This is first div</div>

use float:right initially:

.a{width:50%; float:right; background:#ccc}
.b{width:50%; float:right; background:#ffc;}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .a{width:100%; float:left;}
  .b{width:100%; float:left;}
}

Upvotes: 2

Related Questions