Как отображать различные макеты на разных размерах экрана?

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> 

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> 

Меньшие

[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

Я не уверен, что вы можете изменить порядок столбцов в бутстрапе. Посмотрите здесь: "Reorder CSS Cloumns"