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

Question

My example use bootstrap, but the answer can use other css framework or only css

In this example

<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>

If width of screen larger than 991px

It will display

[A][B][C]

otherwise it will display

[A]
[B]
[C]

But I don't want to display different style only, I also want to display different layout

For example:

Larger than 991px

[A][B][C]

smaller

[B]
[A]
[C]

Another example

<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>

Larger

[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>

Smaller

[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>

How can I use css to do that?

Answer 1

I am not sure you can rearrange the columns in bootstrap. Have a look here : "Reorder CSS Cloumns"