Различный макет сетки столбцов в md и в sm / xs - Bootstrap

Question

ребята.У меня есть небольшая проблема здесь, работая с начальной загрузкой.Я пытаюсь создать контейнер div со строкой, содержащей 3 столбца, равных по ширине:

    <div class="row">

        <div class="col-md-4" style="background:red;">logo</div>
        <div class="col-md-4" style="background:blue;">content</div>
        <div class="col-md-4" style="background:yellow;">content+imgs</div>

    </div>

</div>

Проблема у меня заключается в том, что я хочу, чтобы столбец с логотипом был вторым (после 'content ') на устройствах xs / sm или при изменении размера окна браузера.Я пробовал с push и pull, но я хочу, чтобы столбцы располагались один над другим, а не как inline, как на устройствах md.Я понятия не имею, как это сделать, любая помощь?:)

Answer 1

Используя классы заказов с помощью начальной загрузки, вы можете быстро изменить порядок столбцов.

В этом примере будет размещен второй столбец на экранах XS и SM.

<!--bootstrap 4-->
<div class="row">
      <div class="col-md-4 order-2 order-md-1">first</div>
      <div class="col-md-4 order-1 order-md-2">second</div>
      <div class="col-md-4 order-3 order-md-3">third</div>
    </div>

редактирование:

Для начальной загрузки 3 (3.3.7) вам необходимо использовать классы push & pull. В вашем случае вам придется сделать логотип во втором столбце. Мобильность считается отправной точкой в ​​разработке начальной загрузки.

<!-- bootstrap 3 -->
      <div class="row">
        <div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
        <div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
        <div class="col-md-4" style="background-color:yellow;">content+imgs</div>
      </div>