CSS/CSS3切换元素的位置

Question

我在桌面视图中有4列用于HTML.当我们切换到移动视图时,我们显示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中的元素来处理这个问题.

谢谢你的帮助.

Answer 1

如果使用CSS Flexible Box Layout是一个选项,您可以通过order移动屏幕上的弹性项目(通过@media查询)来实现:

这里的例子

.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; }
}

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

对于供应商前缀,请单击演示中的"Toggle Compiled View"(感谢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/