CODEWITHSUNDEEP
htmlcssresponsive-design
Jimmy
Jimmy

Reputation: 79

3 column responsive (changin column order)

Website link: http://austinfertilityobgyncenter.com/about/

Problem statement:

This is basically a three columns website. (Some pages have only two columns) I want to reorder my 1-2-3 columns to 2-3-1 for mobiles and tablets.

I read some answers on stackoverflow, but unfortunately couldn't find a solution by implementing those solution.

Is it possible to do this CSS? (I guess 'YES', note: I'm not so ninja with responsive designs :-/ )

If YES, Can anybody please suggest me how can I achieve that?

Thanks in advance.

Upvotes: 0

Views: 3433

Answers (3)

Chris Spittles
Chris Spittles

Reputation: 15359

Here are two ways you could do what you want:

1: CSS3 flexbox:

Example: http://jsfiddle.net/j16vc82a/1/

More Info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

.container {
    display: flex;
    margin-bottom: 20px;
}
.item1 {
    order: 1;
    width: 33%;
    background: #f00;
}
.item2 {
    order: 2;
    width: 33%;
    background: #0f0;
}
.item3 {
    order: 3;
    width: 33%;
    background: #00f;
    color:#fff;
}

/* for your media query */

.mobile .item1 {
    order: 3;
}
.mobile .item2 {
    order: 1;
}
.mobile .item3 {
    order: 2;
}
<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

<div class="container mobile">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

2: CSS Floats

Example: http://jsfiddle.net/0wk0526j/

.container {
    margin-bottom: 20px;
    overflow: hidden;
}
.item1 {
    float: left;
    width: 33.33%;
    background: #f00;
}
.item2 {
    float: left;
    width: 33.33%;
    background: #0f0;
}
.item3 {
    float: left;
    width: 33.33%;
    background: #00f;
    color: #fff;
}

/* for your media query */

.mobile .item1 {
    float: right;
}
.mobile .item2 {
    float: left;
}
.mobile .item3 {
    float: right;
}
<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

<div class="container mobile">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

Upvotes: 1

Brewal
Brewal

Reputation: 8189

I guess you don't just want to "change the column order", but also display them one above the other.

This is actually quite new in CSS. You can use flex for this : 

.panel-grid {
    display: flex;
    flex-direction: column;
}
.panel-grid-cell:first-child {
    order: 3;
}

Wrap this in a media query such as : 

@media screen and (max-width: 780px) {
    /* code */
}

I just tested this on you website and it works as expected. See more about compatibility on caniuse

Upvotes: 0

Franky238
Franky238

Reputation: 519

Try your this: You must reverse this divs in this order: 

<div class="panel-grid-cell" id="pgc-4-0-2">
<div class="panel-grid-cell" id="pgc-4-0-1">
<div class="panel-grid-cell" id="pgc-4-0-0">

All this must have float:right.

Upvotes: 0

Related Questions