3列响应（changin列顺序）

Question

网站链接： http://austinfertilityobgyncenter.com/about/

问题陈述：

这基本上是一个三栏网站。 （有些页面只有两列） 我想将手机和平板电脑的1-2-3列重新排序为2-3-1。

我在stackoverflow上阅读了一些答案，但遗憾的是，通过实施这些解决方案无法找到解决方案。

可以做这个CSS吗？ （我想＆＃39;是的＆＃39;，请注意：我不是那么具有响应式设计的忍者： - /）

如果是，可以请任何人建议我如何实现这一目标？

提前致谢。

Answer 1

以下两种方法可以做你想做的事情：

1：CSS3 flexbox：

示例：http://jsfiddle.net/j16vc82a/1/

更多信息：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

＆＃13;

.container {
    display: flex;
    margin-bottom: 20px;
}
.item1 {
    order: 1;
    width: 33%;
    background: #f00;
}
.item2 {
    order: 2;
    width: 33%;
    background: #0f0;
}
.item3 {
    order: 3;
    width: 33%;
    background: #00f;
    color:#fff;
}

/* for your media query */

.mobile .item1 {
    order: 3;
}
.mobile .item2 {
    order: 1;
}
.mobile .item3 {
    order: 2;
}

＆＃13;

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

<div class="container mobile">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

2：CSS Floats

示例：http://jsfiddle.net/0wk0526j/

＆＃13;

＆＃13;

.container {
    margin-bottom: 20px;
    overflow: hidden;
}
.item1 {
    float: left;
    width: 33.33%;
    background: #f00;
}
.item2 {
    float: left;
    width: 33.33%;
    background: #0f0;
}
.item3 {
    float: left;
    width: 33.33%;
    background: #00f;
    color: #fff;
}

/* for your media query */

.mobile .item1 {
    float: right;
}
.mobile .item2 {
    float: left;
}
.mobile .item3 {
    float: right;
}

＆＃13;

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

<div class="container mobile">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想你不想改变列顺序＆＃34;，而是一个在另一个上面显示它们。

这实际上是CSS中的新功能。您可以使用flex：

.panel-grid {
    display: flex;
    flex-direction: column;
}
.panel-grid-cell:first-child {
    order: 3;
}

在媒体查询中包含此内容，例如：

@media screen and (max-width: 780px) {
    /* code */
}

我刚刚在您的网站上对此进行了测试，并且按预期工作。详细了解caniuse

上的兼容性

Answer 3

试试这个：您必须按此顺序反转此div：

<div class="panel-grid-cell" id="pgc-4-0-2">
<div class="panel-grid-cell" id="pgc-4-0-1">
<div class="panel-grid-cell" id="pgc-4-0-0">

所有这一切都必须float:right。