CODEWITHSUNDEEP
htmlcsssortingresponsive-design
l2aelba
l2aelba

Reputation: 22197

Resort elements by CSS (for responsive)

I have 3 elements like this... : (and this is what i want to be, when on large-screen ✓ )

3Elements

HTML :

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

CSS :

.a {
    float: right;
    width: 50%;
    height: 100px;
    background: red;
}
.b {
    float: left;
    width: 50%;
    height: 100px;
    background: green;
}
.c {
    float: left;
    width: 100%;
    height: 150px;
    background: blue;
}

But problem is when on small-screen, I want to resort like "A,C,B" not "A,B,C" , and all with width:100%;

Demo : http://jsfiddle.net/oy4sc4jd/

@media(max-width:450px){
    .a, .b {
        float: none;
        width:100%;
    }
}

Upvotes: 1

Views: 481

Answers (4)

Nouman Niazi
Nouman Niazi

Reputation: 371

Here is another way of doing it

.hidden{display:none;}

.a {
    float: right;
    width: 50%;
    height: 100px;
    background: #a22020;
}
.b {
    float: left;
    width: 50%;
    height: 100px;
    background: #20a260;
}
.c {
    float: left;
    width: 100%;
    height: 150px;
    background: #204ba2;
}

@media(max-width:450px){
    .a, .b {
        float: none;
        width:100%;
    }
    .b{ display:none;}
    .b ~ .hidden{
           display: inline-block;
    }
}



.a,.b,.c {font-size:35px;color:#fff;text-align:center;padding-top:60px;}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="b hidden">B</div>

Upvotes: -1

maioman
maioman

Reputation: 18764

You can use flexbox with the option to display column on small @media:

.a {
    float: right;
    width: 50%;
    height: 100px;
    background: #a22020;
}
.b {
    float: left;
    width: 50%;
    height: 100px;
    background: #20a260;
}
.c {
    float: left;
    width: 100%;
    height: 150px;
    background: #204ba2;
}

@media(max-width:450px){

.flex{
    display:flex;
    flex-direction:column ;
}
  .a {
        float: none;
        width:100%;
    order: 1;
    }
.b {
        float: none;
        width:100%;
    order: 3;
    }
.c{
        float: none;
        width:100%;
    order: 2;
    }
}

or check fiddle

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Assuming you have a common #wrapper element you may use a CSS3 solution with display: flex defining the order of appereance of your elements: http://jsfiddle.net/njfcefqd/

CSS

@media(max-width:450px){

    #wrapper {
       display: flex;
       flex-direction: column;
    }

    .a, .b {
        float: none;
        width:100%;
    }
    .a { order: 1; }
    .b { order: 3; }
    .c { order: 2; }
}

Upvotes: 2

dfsq
dfsq

Reputation: 193311

One way to achieve it is to use table-layout for small dimensions and force "C" block render at the bottom position with caption-side property:

@media(max-width:450px){
    .a, .b {
        float: none;
        width:100%;
    }
    .container {
        display: table;
        width: 100%;
    }
    .b {
        display: table-caption;
        caption-side: bottom;
        width: 100%;
    }
}

.container is a wrapper element for A-B-C blocks.

Demo: http://jsfiddle.net/oy4sc4jd/2/

Upvotes: 2

Related Questions