CSS/CSS3 切换元素位置

Question

我在桌面 View 中有 4 列 HTML。当我们切换到移动 View 时，我们显示 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>

我在移动版本中得到的 View 是:

我想要以下 View :

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

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

感谢您的帮助。

Answer 1

如果使用 CSS Flexible Box Layout是一个选项，您可以简单地通过 order 来实现在移动屏幕上使用 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; }
}

(为简洁起见，省略了供应商前缀)

对于供应商前缀，请单击演示中的“切换编译 View ”(感谢 Autoprefixer)。

最后但并非最不重要的一点是，如果您不熟悉 CSS Flexible Box Layout您可以引用以下资源:

• http://dev.w3.org/csswg/css-flexbox (规范是你的 friend !)
• 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/