CSS/CSS3切换元素的位置-CSS/CSS3toswitchpositionsofelements

5  

If using CSS Flexible Box Layout is an option, you could simply achieve that by ordering the flex items on mobile screens (via @media queries):

如果使用CSS Flexible Box Layout是一个选项,您可以通过在移动屏幕上订购flex项目来实现这一点(通过@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; }
}

(vendor prefixes omitted due to brevity)

(由于简洁,省略了供应商前缀)

For vendor prefixes click on "Toggle Compiled View" in the demo (Thanks to Autoprefixer).

对于供应商前缀,请单击演示中的“Toggle Compiled View”(感谢Autoprefixer)。

At last but not least, if you're not familiar with CSS Flexible Box Layout you could refer to the following resources:

最后但同样重要的是,如果您不熟悉CSS Flexible Box Layout,可以参考以下资源:

• http://dev.w3.org/csswg/css-flexbox (The spec is your friend!)

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/

3  

You could do it by css transform and @media queries: - not very elegant but works just fine.

你可以通过css transform和@media查询来做到这一点: - 不是很优雅,但工作得很好。

JSFiddle - DEMO or Full Screen

JSFiddle - DEMO或全屏

HTML:

    
Column 1
    
Column 2
    
Column 3
    
Column 4

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 */
    }
}

MORE INFO - CSS Transforms:

更多信息 - CSS转换:

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

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