3 列响应式（更改列顺序）

Question

网站 link: http://austinfertilityobgyncenter.com/about/

问题陈述：

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

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

是否可以这样做CSS？（我猜 'YES'，注意：我不太喜欢响应式设计 :-/ ）

如果是，有人可以建议我如何实现吗？

提前致谢。

Answer 1

我猜你不只是想 "change the column order"，还想把它们一个一个地显示在另一个上面。

这在 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 2

试试这个：您必须按以下顺序反转此 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.

Answer 3

您可以通过以下两种方式做您想做的事：

1: CSS3 弹性框:

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

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

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

<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>

2：CSS 浮点数

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

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

<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>

3 列响应式（更改列顺序）

3 column responsive (changin column order)

html

css

responsive-design

1: CSS3 弹性框:

2：CSS 浮点数