如何在不同的屏幕尺寸上顯示不同的布局？

Question

我的示例使用引導程序，但答案可以使用其他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

我不確定您是否可以重新排列引導程序中的列。 在這里看看： “重新排序CSS Cloumns”