Верстаю сайт на бутстрапе. Нужно сделать так, чтобы та информация, которая отображается на больших экранах в правой колонке, на мобильных устройствах отображалась сверху контентной части. Однако по умолчанию правая колонка уходит вниз. Как мне сверстать страницу так, чтобы правая колонка уходила вверх?
Код HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<main>
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="content">
<div class="info">
<h2>Информация</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed massa sollicitudin, accumsan
diam et, luctus elit. Praesent odio est, faucibus a est at, dictum facilisis mi. Vestibulum a
libero odio. Sed nec ullamcorper nulla, ac lobortis odio. Donec egestas vel risus ac gravida.
Curabitur consectetur lobortis auctor. Fusce cursus semper lorem, ac auctor nunc fermentum sit
amet. Pellentesque nec lacus in magna consectetur viverra. Proin quis turpis laoreet, aliquam
est ac, lacinia nibh. Aliquam erat volutpat. Curabitur placerat consectetur maximus.
Mauris accumsan leo non lacus vehicula efficitur.
</div>
<div class="galerry">
<h2>Фотогалерея</h2>
Место для фотогалереи
</div>
<div class="news">
<h2>Новости</h2>
Место для новостей
</div>
</div>
</div>
<div class="col-sm-3">
<div class="search">
<h4>Поиск</h4>
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</div>
<div class="newspaper">
<h3>Газета</h3>
<div class="last">Содержимое блока</div>
</div>
<div class="contacts">
<h3>Контакты</h3>
<div class="contact">
<h5 class="small">jjj</h5>
</div>
</div>
</div>
</div>
</div>
</main>
Бутстрап умеет менять колонки местами: http://getbootstrap.com/css/#grid-column-ordering
Их надо расположить так, как они будут стоять на мобильном, и при переходе к широкому экрану верхнюю колонку оттолкнуть вправо, а нижнюю вытянуть влево.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<main>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-push-9">
<div class="search">
<h4>Поиск</h4>
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</div>
<div class="newspaper">
<h3>Газета</h3>
<div class="last">Содержимое блока</div>
</div>
<div class="contacts">
<h3>Контакты</h3>
<div class="contact">
<h5 class="small">jjj</h5>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-pull-3">
<div class="content">
<div class="info">
<h2>Информация</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed massa sollicitudin, accumsan
diam et, luctus elit. Praesent odio est, faucibus a est at, dictum facilisis mi. Vestibulum a
libero odio. Sed nec ullamcorper nulla, ac lobortis odio. Donec egestas vel risus ac gravida.
Curabitur consectetur lobortis auctor. Fusce cursus semper lorem, ac auctor nunc fermentum sit
amet. Pellentesque nec lacus in magna consectetur viverra. Proin quis turpis laoreet, aliquam
est ac, lacinia nibh. Aliquam erat volutpat. Curabitur placerat consectetur maximus.
Mauris accumsan leo non lacus vehicula efficitur.
</div>
<div class="galerry">
<h2>Фотогалерея</h2>
Место для фотогалереи
</div>
<div class="news">
<h2>Новости</h2>
Место для новостей
</div>
</div>
</div>
</div>
</div>
</main>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Мне нужно несколько колонок в ряд, одинаковых по высоте и высота подстраивается под максимальный по высоте элементРеализовал известным...
Вопрос следующий, возможно ли плавное появление блока dropdown без использования JS jQuery и тп