CSS/CSS3切换元素的位置

Question

我在HTML的桌面视图中有4列。 当我们切换到移动视图时，我们显示2列和2行（请参阅附图以供参考）。

的代码是：

<div class="sections"> 
    <div class="one-fourth-col">Column 1</div> 
    <div class="one-fourth-col">Column 2</div> 
    <div class="one-fourth-col">Column 3</div> 
    <div class="one-fourth-col">Column 4</div> 
</div> 

我在手机版中得到的观点是：

我想以下几种观点：

基本上，我想要在第一列中显示＃1和＃2在左边的mn。 右侧第二列＃3和＃4。

我在css中使用float：right属性。 我想通过不移动HTML中的元素来处理这个问题。

感谢您的帮助。

Answer 1

如果使用CSS Flexible Box Layout是一个选项，你可以简单地实现，通过order荷兰国际集团在移动屏幕上的柔性物品（经@media查询）：

Example Here

.sections { display: flex; flex-wrap: wrap; } 

.one-fourth-col { 
    flex: 1; 
    margin: 0 1%; 
} 

@media (max-width: 767px) { 
    .one-fourth-col { 
    flex: 1 48%; /* Actually it should be 50% 
        but there's a margin of 1% 
        around the columns, hence 50%-2(1%) = 48% */ 
    } 

    .sections > :nth-child(1) { order: 1; } 
    .sections > :nth-child(2) { order: 3; } 
    .sections > :nth-child(3) { order: 2; } 
    .sections > :nth-child(4) { order: 4; } 
} 

（供应商前缀省略由于简洁）

对于供应商前缀点击“切换编译视图”在演示（感谢Autoprefixer）。

最后但并非最不重要的，如果你不熟悉CSS Flexible Box Layout你可以参考以下资源：

• http://dev.w3.org/csswg/css-flexbox（该规范是你的朋友！）
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• http://www.html5rocks.com/en/tutorials/flexbox/quick/
• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://weblog.bocoup.com/dive-into-flexbox/

Answer 2

你可以通过css transform和@media查询： - 不是很优雅，但工作得很好。

的jsfiddle - DEMO或Full Screen

HTML：

<div class="sections"> 
    <div style="background-color: #ADFF2F;" class="one-fourth-col div-1">Column 1</div> 
    <div style="background-color: #0066FF;" class="one-fourth-col div-2">Column 2</div> 
    <div style="background-color: #FFA500;" class="one-fourth-col transform div-3">Column 3</div> 
    <div style="background-color: #FF00FF;" class="one-fourth-col transform div-4">Column 4</div> 
</div> 

CSS：

body { 
    margin: 0px; 
} 
.sections { 
    margin-top: 50px; 
} 
.one-fourth-col { 
    width: 20%; 
    margin: 2.5%; 
    padding: 25px 0px; 
    text-align: center; 
    float: left; 
} 
@media (max-width: 767px) { 
    .one-fourth-col { 
     float: none; 
     width: 40%; 
     margin-right: 0px; 
     margin-bottom: 0px; 
    } 
    .transform { 
     -webkit-transform: translate(100%, -200%); 
     -moz-transform: translate(100%, -200%); 
     -ms-transform: translate(100%, -200%); 
     -o-transform: translate(100%, -200%); 
     transform: translate(100%, -200%); 

     margin-left: 15%; /* 3 X Value of div-1 and div-2 margin-left */ 
    } 
    .div-1 { 
     margin-left: 5%; 
    } 
    .div-2 { 
     margin-left: 5%; 
     margin-top: 50px; /* margin between rows */ 
    } 
    .div-3 { 
     margin-top: -50px; /* negative value of .div-2 margin-top */ 
    } 
    .div-4 { 
     margin-top: 50px; /* same value of .div-2 margin-top */ 
    } 
} 

更多资讯 - CSS跨形式：

• http://www.w3.org/TR/css3-transforms/

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform