CSS - 交换柱

Question

我有我的网页上两列：

Left-Column Right-Column 

在手机和平​​板设备，我想右栏向左一前显示。例如：

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

任何人如何使用CSS做到这一点？我知道我可以使用Bootstrap来完成，但WordPress模板并非使用Bootstrap设计的。

感谢

Answer 1

这将帮助你What is the best way to move an element that's on the top to the bottom in Responsive design

并检查这也http://cssdeck.com/labs/81csjw7x

Answer 2

不是很难，只是定位在媒体查询扮演相反的其他元素的宽度：

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

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

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

    .right { 
     right: 75%; 
    } 
} 

Example

Answer 3

你的问题不是很清楚。

但是根据目前的知识，左列的float:right和右列的 float:left。

观看演示：

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

如果你给你的代码，我可以更好地了解需要

Answer 4

如果你不关心浏览器的支持，您可以使用flexbox这一点。

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

这应该在所有主要浏览器，并在IE10和后续工作。见CanIuse。

某些浏览器仍需要此功能的前缀。

Answer 5

我会用柔性盒和媒体查询：

#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>