CSS – Swap Columns

5 comments

1. 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.

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>

3. 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

4. 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

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

Comments are closed.