html - 3 列响应式(更改列顺序)

Question

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

问题陈述:

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

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

这个 CSS 可以实现吗？ (我猜是'是'，注意:我对响应式设计不是那么忍者:-/)

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

提前致谢。

Answer 1

这里有两种你可以做你想做的事情的方法:

1: CSS3 flexbox :

示例: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 float

示例: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>