CSS/CSS3 切换元素位置答案

【问题标题】：CSS/CSS3 to switch positions of elementsCSS/CSS3 切换元素位置
【发布时间】：2014-11-07 11:10:27
【问题描述】：

我在 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。以及右侧第二列中的#3 和#4。

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

感谢您的帮助。

【问题讨论】：

@HashemQolami - 也可以使用多列布局，甚至 - 仅在 IE 中 - 使用网格布局。

标签： css responsive-design

【解决方案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，您可以参考以下资源：

【讨论】：

看看这个！ JSFiddle - DEMO 或 Full Screen
@MaryMelody +1 干得好！在撰写本文时，我并没有考虑过这种方法。

【解决方案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

【讨论】：