html - 如何在不同的屏幕尺寸上显示不同的布局？

Question

我的例子使用了 bootstrap，但答案可以使用其他 css 框架或只使用 css

在这个例子中

<div class="row">
    <div class="col-md-4">A</div>
    <div class="col-md-4">B</div>
    <div class="col-md-4">C</div>
</div>

如果屏幕宽度大于991px

会显示

[A][B][C]

否则会显示

[A]
[B]
[C]

但我不想只显示不同的样式，我还想显示不同的布局

例如:

大于 991px

[A][B][C]

更小

[B]
[A]
[C]

另一个例子

<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
</div>
<div class="row">
    <div class="col-md-6">C</div>
    <div class="col-md-6">D</div>
</div>

更大

[A][B]
[C][D]


<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
</div>
<div class="row">
    <div class="col-md-6">C</div>
    <div class="col-md-6">D</div>
</div>

更小

[D][B]
[C][A]


<div class="row">
    <div class="col-md-6">D</div>
    <div class="col-md-6">B</div>
</div>
<div class="row">
    <div class="col-md-6">C</div>
    <div class="col-md-6">A</div>
</div>

我如何使用 css 来做到这一点？

Answer 1

我不确定您是否可以重新排列 Bootstrap 中的列。在这里看看:"Reorder CSS Cloumns"