html - 在响应式布局中重新组织 div

Question

我有一个在小屏幕上应该看起来像这样的响应式布局:

|A1             A2|
|B1             B2|

在更宽的屏幕上像这样:

|        A1 A2 B2 B1        |

A2 和 B2 单元格具有固定但未知的宽度。在小屏幕上，A1 和 B1 单元格中的文本左对齐，但在较宽的屏幕上，A1 的文本右对齐。

我使用 Bootstrap 来管理 A 和 B 行，但我不能将它用于 A2 和 B2 单元格，因为我不希望它们改变大小。我不能使用硬编码边距，因为我不知道这些单元格的宽度。

这是我目前所拥有的(以 fiddle 形式提供):

HTML:

<div class="row">
    <div class="col-sm-6 left">
        <div class="big-cell">A1</div>
        <div class="small-cell">A2</div>
    </div>
    <div class="col-sm-6 right">
        <div class="big-cell">B1</div>
        <div class="small-cell">B2</div>
    </div>
</div>

CSS:

.small-cell {
    background-color: #ddffff;
    display: inline-block;
    text-align: center;
    width: 100px; /* Value used as an example */
}
.left .small-cell {
    float: right;
}
.right .small-cell {
    float: right;
}
.big-cell {
    background-color: #ddddff;
    display: inline-block;
}
@media screen and (min-width: 768px) {
    .small-cell {
        display:block;
    }
    .right .small-cell {
        float: left;
    }
}

它看起来几乎没问题，除了我无法让 A1 单元格在更宽的屏幕上右对齐，紧挨着 A2。

Answer 1

解决这个问题的一种方法是重构 html 标记并将 a2 div 放在 a1 之前

<div class="small-cell ">A2</div>
<div class="big-cell">A1</div>

然后添加一个float:right;当超过 768px 到 a1 格时。

jsfiddle:http://jsfiddle.net/vLnzj9ue/2/