CSS3實現元素交換位置，是一種非常實用的技巧。當我們需要對頁面元素進行定位和布局時，經常會遇到需要調整元素位置的情況，這時候使用CSS3的彈性盒模型（Flexbox）就非常方便了。

首先，在CSS中使用display:flex;開啟彈性盒模式，這樣容器內的所有子元素就可以在彈性盒內自由定位了。

.container {
display: flex;
justify-content: center;
align-items: center;
}

其中，justify-content屬性用于在彈性盒中設置主軸（橫向）方向的對齊方式，align-items屬性用于設置交叉軸（縱向）方向的對齊方式。

接下來，我們可以使用order屬性來控制子元素的順序。默認情況下，子元素的order值都是0，數值越小越靠前，數值越大越靠后。

.item1 {
order: 2;
}
.item2 {
order: 1;
}

在上面的示例中，我們將第一個 .item1 元素的order設置為2，將第二個 .item2 元素的order設置為1，這樣它們的位置就會交換。

除了order屬性之外，還可以利用flex-direction屬性來控制子元素的排列方式。比如，如果要水平翻轉元素的順序，可以使用flex-direction: row-reverse;。

.container {
display: flex;
flex-direction: row-reverse;
}

在這種情況下，子元素的order值也將相應地反轉。

綜上所述，使用CSS3實現元素交換位置是一種便捷的布局方式，只需要少量的代碼即可實現。但需要注意的是，這種交換位置的方式可能會對SEO優化產生不利影響，因此在實際應用中需要謹慎使用。