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>