Question

我正在使用我们的朋友javascript编写解决方案，但我想知道你是否CSS CSS专家可能会为我提供更优雅的解决方案。

我有四列如此

| A | B | C | D|

当他们开始变得有点局促，屏幕上大约1130像素宽时，我想将其更改为此顺序：

| B | C | D |
|     A     |

压缩它们的下一个阶段是：

| B | C |
| A | D |

然后是更多移动布局：

| C |
| B |
| D |
| A |

我知道这有点疯狂，但这是有充分理由的。这些列主要用于不同的任务阶段。因此，在查看项目概述时，首先要看到某些类别，这很好。

我没有个人用一些jQuery来移动div的问题，但使用CSS编写它会很好。

Answer 1

Twitter Bootstrap 3's grid system非常强大，可能会得到你想要的东西。

使用他们的类会是这样的（我会使用他们的mixin用更少的东西来创建它，它让你的类更加语义化）。见this JS Fiddle

<div class="content">
    <div class="row">
        <div id="c" class="col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-4 col-lg-3 col-lg-push-6">C</div>
        <div id="b" class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-4 col-lg-3 col-lg-pull-0">B</div>
        <div id="d" class="col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-0 col-lg-3 col-lg-push-3">D</div>
        <div id="a" class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-12 col-md-pull-0 col-lg-3 col-lg-pull-9">A</div>
    </div>
</div>

更新：使用他们内置的LESS Mixins获得一些奖励积分...这可能会更好地分组，但我认为每个项目更容易阅读。

#a{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-pull(6);
    .make-md-column(12);
    .make-md-column-pull(0);
    .make-lg-column(3);
    .make-lg-column-pull(9);
}

#b{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-pull(6);
    .make-md-column(4);
    .make-md-column-pull(4);
    .make-lg-column(3);
    .make-lg-column-pull(0);
}

#c{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-push(6);
    .make-md-column(4);
    .make-md-column-push(4);
    .make-lg-column(3);
    .make-lg-column-push(6);
}

#d {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-push(6);
    .make-md-column(4);
    .make-md-column-push(0);
    .make-lg-column(3);
    .make-lg-column-push(3);
}

那么你的HTML只是：

<div id="c">C</div>
<div id="b">B</div>
<div id="d">D</div>
<div id="a">A</div>

Answer 2

在不知道列的高度的情况下，它可能会有点棘手，但您可以结合使用css媒体查询（例如@media screen and (max-width:1130px){...）和绝对定位来实现您正在寻找的效果。

这是一个JSFiddle demo来帮助您入门。只需调整浏览器的宽度即可触发断点（任意设置为700,500和300像素宽度）。

但是，您仍然可能需要javascript（或jQuery）根据其他列的高度设置某些列的top值。

Answer 3

一个非常简单的解决方案是复制内容，然后根据屏幕宽度隐藏或显示div。所以你的标记可能如下所示：

<div id="container-desktop">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<div id="container-tablet">
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">A</div>
</div>

<div id="container-phone">
    <div class="col">C</div>
    <div class="col">B</div>
    <div class="col">D</div>
    <div class="col">A</div>
</div>

CSS：

.col {
    width:25%;
    float:left;
    display:inline;
}
#container-tablet,
#container-phone {
    display:none;
}

@media all and (max-width: 768px) {

    .col { width:50% }

    #container-desktop {
        display:none;
    }

}
@media all and (max-width: 480px) {

    .col { width:100% }

    #container-tablet {
        display:none;
    }

}

四列，根据媒体查询的宽度改变顺序

3 个答案: