CSS - Swap Columns

Question

I have two columns on my page:

Left-Column    Right-Column

On mobile and tablet devices, I want the Right-Column to display before the left one. For e.g.:

<p>Right-Column</p>
<p>Left-Column</p>

Anyone how to do this using CSS? I know I can do it using Bootstrap but the wordpress template is not designed using Bootstrap.

Thanks

How are we supposed to supply a working answer for you without seeing the relevant code? http://stackoverflow.com/help/how-to-ask — Aaron, Oct 19 '15 at 10:47

score 5 · Answer 1 · edited Feb 12 '16 at 11:16

If you don't care about browser support you can use flexbox for this.

.container {
    display: flex;
}

.container > div {
    width: 50%;
    padding: 0 15px;
}

@media (max-width: 600px){
    .left-col {
        order: 2;
    }

    .right-col {
        order: 1;
    }
}

http://jsfiddle.net/scdvL0Ly/

This should work in all major browsers and in IE10 and up. See CanIuse.

Some Browsers still require prefixes for this feature.

Sebastian Wozny · Answer 2 · 2015-10-19T11:57:16.420

2

I would use flex-box and a media query:

#parent {
  display: flex;
  flex-wrap:wrap
}
#parent > div {
  flex: 1 1 40%;
}
@media only screen and (max-device-width: 500px) {
  #parent > div {
      flex: 1 1 100%;
  }
  #left {
    order: 2;
  }
  #right {
    order: 1;
  }
}

<div id="parent">
  <div id="left">
    <span>Left</span>
  </div>

  <div id="right">
    <span>Right</span>
  </div>
</div>

edited Oct 19 '15 at 11:57

answered Oct 19 '15 at 11:49

Sebastian Wozny

16,943
7
52
69

score 0 · Answer 3 · edited Feb 12 '16 at 11:15

0

Not very difficult, just play with the positioning in media queries opposite to the width of the other element:

.left {
    width: 75%;
    background: red;
}

.right {
    width: 25%;
    background: blue;
}

@media (max-width: 992px) {
    .left {
        left: 25%;
    }

    .right {
        right: 75%;
    }
}

Example

edited Feb 12 '16 at 11:15

John Slegers

45,213
22
199
169

answered Oct 19 '15 at 10:53

Morpheus

8,829
13
51
77

this code doesn't work as expected. On smaller viewports the red block should be placed above the blue block. – Fabrizio Calderan Oct 19 '15 at 11:00
Really? "On mobile and tablet devices, I want the Right-Column to display before the left one" – Morpheus Oct 19 '15 at 11:01
the columns have to be swapped but also stacked as requested by OP – Fabrizio Calderan Oct 19 '15 at 11:13
@Fabrizio Calderan possibly yours would be a correct answer if OP would comment on anything :) – Morpheus Oct 20 '15 at 07:29

score 0 · Answer 4 · answered Oct 19 '15 at 11:00

0

You question is not so clear.

But in the light of the present knowledge , keep float:right for Left-Column and float:left for Right-Column .

See the demo:

http://jsfiddle.net/srmpx6Lp/2/

If you give your code , i can better understand the need

answered Oct 19 '15 at 11:00

Dyuthi Chandran

44
6

This does reverse the order. But the OP would also like them stacked on mobile. – mHenderson Jul 23 '21 at 15:49

score 0 · Answer 5 · answered Dec 08 '19 at 11:46

0

In case of <table> you can also use direction: rtl for parent and direction: ltr to child elements.

answered Dec 08 '19 at 11:46

Martin Zvarík

2,120
22
27

CSS - Swap Columns

5 Answers5