Hi all,

I have a layout with right and left sidebar. The problem starts when the screen gets smaller, theen the left sidebar is under the page menu selector, then the center column, then the right one. I'd like to have it like

Header
Center column
SidebarLinks (left sidebar)
SidebarRechts (right sidebar)

I tried to put this in layout.css, but nothing happens:

@media screen and (max-width: 767px) {    
	#content {
    width:	100%;
    }
    #SidebarLinks {        
    width:	100%;
    }
    #SidebarRechts {
    width:	100%;
       
    }
}

any advice?

Oh, what I wanted to say, I tried with .content and #content, nothing worked.

To do this you are going to have to write a jquery to do this. Here a link to an example you can play with

I found a weird but working solution. I defined another sidebar SideBarLinksM below the column, that has the same widgets as SideBarLinks, and make that invisible. I then toggle the sidebars with the max-width selector.

Here is the CSS:

/* A sidebar */
#SidebarLinks {  
	padding: 				20 0px;
   	background: 			#ffffff; 
}
#SidebarLinksM {  
	padding: 				20 0px;
   	background: 			#ffffff; 
    display:				none; 
}

/* A sidebar */
#SidebarRechts {  
	padding: 				20 0px;
    background: 			#ffffff;
}	

#SidebarHeaderLinks {  
    padding: 				0 0px;
    background: 			#ffffff; 
}
#SidebarHeaderMitte {  
    padding: 				0 0px;
   	background: 			#ffffff; 
}
#SidebarHeaderRechts {  
    padding: 				0 0px;
   	background: 			#ffffff; 
}

 
@media only screen and (max-width: 959px) {
    #content {
    width:70%;
    margin-left:0;
    float:	left;
     }
    #SidebarLinks {
    width: 30%;   
    float:	right;
  }
    #SidebarRechts {        
    width: 20%;
    float:	right;
    }
}

@media screen and (max-width: 767px) {    
	#content {
    width:	100%;
    float:	left;
    }
    #SidebarLinks {        
    display: none;
    }
    #SidebarLinksM {        
    display: block;
	width:	50%; 
    float:	left;
    }
    #SidebarRechts {
	width:	50%; 
    float:	right;
    }
}

I can't see how I mark this thread solved, but I'm totally content with my solution. Thanks for the help.