响应式两列布局：在另一列之间移动一列

Question

我有一个响应式网站，在大型浏览器窗口中有两列布局。两列布局目前是使用浮动实现的。在较小的屏幕上，我希望只有一列。另一列的内容应该显示在主列的两个元素之间，如下所示：

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column">
    <div class="green-element"></div>
  </div>
</div>

我尝试使用基于 flex-box 的方法，基本上是 the one described in this question，但是当 flex-direction 为 column 时，Safari 中似乎仍然不支持 flex-basis。适当的 Safari 支持是必须的，因为 Safari 是我的访问者的主要浏览器。

有没有一种方法可以仅使用 CSS 来实现，而不必在我的标记中放置两次绿色元素？

Answer 1

你应该通过margin-top使用@media。在特定的屏幕宽度（通过@media）上，将绿色元素的margin-top更改为-200%。并将黄色元素的margin-top 更改为100%。他们改变了他们的位置非常好:) 请看这个链接：

http://jsbin.com/xozeviseka/edit?html,output

Answer 2

这是使用一个弹性容器的通用解决方案：

<div class="container">
    <div class="box"> ... </div><!-- red box -->
    <div class="box"> ... </div><!-- green box -->
    <div class="box"> ... </div><!-- yellow box -->
</div>

---

从小屏幕开始（无特殊原因），将它们堆叠成一列：

.container {
    display: flex;
    flex-direction: column;
}

.box {
    height: 100px;
    width: 100%;
}

---

为更宽的屏幕重新安排布局：

@media (min-width: 800px) {

   .container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        flex-basis: 45%;
    }
}

在宽度超过 800 像素的屏幕上，容器将项目排成一行并启用换行。每个框都有足够大的宽度 (flex-basis)，一行中只能容纳两个。

---

完整演示：

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    background-color: #f5f5f5;
    border: 1px solid #aaa;
}

.box1 { background-color: red; }
.box2 { background-color: lightgreen; }
.box3 { background-color: yellow; }

.box {
    height: 100px;   /* `flex-basis: 100px` would also work */
    width: calc(100% - 20px);
    margin: 5px 10px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

@media (min-width: 800px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .box {
        flex-basis: 45%;
    }
}

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
</div>

jsFiddle

---

根据您的问题：

...但是当flex-direction 是column 时，Safari 似乎仍然不支持flex-basis

我不确定这是否正确 (caniuse.com)。

但是，您始终可以使用 width 或 height 属性而不是 flex-basis（更多详细信息：What are the differences between flex-basis and width?）。

Answer 3

您需要更改一些 html 结构，然后才能执行此操作。

*,*:after,*:before {
	box-sizing:border-box;
}
.two-columns {
	position:relative;
	background:#EFEFEF;
	border:1px solid #000;
}
.red-element,
.green-element,
.yellow-element {
	margin-bottom:30px;
}
.red-element {
	height:70px;
	background:#FF0004;
}
.green-element {
	height:70px;
	background:#7ED321;
}
.yellow-element {
	height:100px;
	background:#F8E71C;
}
@media (min-width:767px) {
	.main-column {
		width:70%;
		padding:10px;
	}	
	.sidebar-column {
		position:absolute;
		right:0;
		top:0;
		width:30%;
		padding:10px;
	}
}

<div class="two-columns">
    <div class="main-column">
        <div class="red-element"></div>
            <div class="sidebar-column">
                <div class="green-element"></div>
            </div>
        <div class="yellow-element"></div>
    </div>
</div>

或者，如果您不想更改 html 结构，则必须采用另一个仅在移动设备中显示的元素，例如

*,*:after,*:before {
	box-sizing:border-box;
}
.two-columns {
    background: #EFEFEF;
    border: 1px solid #000;
    overflow: hidden;
}
.red-element,
.green-element,
.yellow-element {
	margin-bottom:30px;
}
.red-element {
	height:70px;
	background:#FF0004;
}
.green-element {
	height:70px;
	background:#7ED321;
}
.yellow-element {
	height:100px;
	background:#F8E71C;
}
.hideMobile{
	display:none;
}
@media (min-width:767px) {
	.main-column {
		width: 70%;
		float: left;
		padding: 10px;
	}
	
	.sidebar-column {
		float: right;
		width: 30%;
		padding: 10px;
	}	
	.showMobile {
		display:none;
	}
	.hideMobile {
		display:block;
	}
}

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="green-element showMobile"></div><!--only for mobile-->
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column hideMobile"><!--hide in mobile-->
    <div class="green-element"></div>
  </div>
</div>

Answer 4

使用引导，

<div class="row">
    <div class="col-md-8">
        <div class="red-element"></div>
    </div>

    <div class="col-md-4">
        <div class="green-element"></div>
    </div>

    <div class="col-md-8">
        <div class="yellow-element"></div>
    </div>
    <div class="clearfix"></div>
</div>

这使用浮动方法并适用于所有浏览器。