Подтвердить что ты не робот

Создание левой боковой панели появляется под правой колонкой на мобильном телефоне с загрузочным блоком 3

У меня есть макет, где боковая панель слева. Это не проблема для настольных браузеров. Однако, когда он изменяется на мобильный, боковая панель появляется над основным столбцом.

Проблема проиллюстрирована на http://bootply.com/89871

Кто-нибудь знает, как заставить их обменять? Я бы предпочел использовать CSS-решение, если это возможно.

Ответ 1

Там может быть лучший способ сделать это, но вот что я буду делать:

<div class="container"> 
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side hidden-sm">
        Left (Side) - Move content to Partial View
      </div>
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side visible-sm">
        Bottom - Load content from Partial VIew
       </div>
    </div>    
</div>

Что я сделал:

Добавьте класс hidden-sm и visible-sm, чтобы скрыть первый div и сделать третий div видимым, когда он является мобильным устройством. Вы можете захотеть изменить классы для настройки таблеток, если это необходимо.
Я бы рекомендовал перемещать содержимое левой боковой панели в частичное представление, а затем загружать частичное в обоих div. Таким образом, у вас нет дублированного контента.

Update

Этот способ лучше:

<div class="container clearfix"> 
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side pull-left">
        Left (Side) - Move content to Partial View
      </div>
    </div>    
</div>

Что я сделал:

Добавьте clearfix в container div, так как мы плаваем divs
Сделать правильный контент первым в разметке
Добавьте pull-right и pull-left для размещения содержимого, где оно должно быть

Ответ 2

Более чистый подход будет использовать классы упорядочения столбцов Bootstrap.

"Легко изменить порядок наших встроенных столбцов сетки с классами .col-md-push- * и .col-md-pull- *.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

В результате появится левый столбец справа и справа слева.

Источник: http://getbootstrap.com/css/#grid-column-ordering