Давайте сразу посмотри демо1 и демо2. Если не смотреть в код, то в обоих примерах нет совершенно никакх различий, конечно, если вы смотрите в большом разрешении. Но давайте попробуем уменьшить. Как видно, в демо2 левый блок находится под правым, т.е. основное содержимое сайта находится выше, чем менее значимый блок.
Если взглянуть в код, то контентная часть опять-таки находится выше обычного сайдбара, а это уже важно для SEO. Давайте рассмотрим, как нам удалось добиться такого эффекта.
Если взглянуть на код, то здесь у нас идет последовательно сначала <aside> (сайдбар), а уже потом только <article> (статья). Собственно, в демо1 мы видим тоже самое: сначала блок, потом сайдбар.
Давайте сначала просто попробуем переставить, местами <aside> и <article> и вот что у нас получилось (см. демо)
При большом разрешении мы видим, что контентная часть у нас стала ливее, а сайдбар правее. Если уменьшить размер, то все отлично: контент выше, сайдар ниже. Но при большом размере браузера мы все-таки хотим видеть сайдар слева, а контент справа, а при маленьком размере экрана контент сверху, а сайдбар снизу. Давайте это сделаем.
<div class="row">
<article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
<h1>Services</h1>
<p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital, featuring the latest in diagnostic and surgical equipment, and a staff of seasoned veterinary specialists in the areas of general veterinary medicine and surgery, oncology, dermatology, orthopedics, radiology, ultrasound, and much more. We also have a 24-hour emergency clinic in the event your pet needs urgent medical care after regular business hours.</p>
<p>At Wisdom, we strive to be your pet’s medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones in his or her life. Our overarching goal is to give your pet the best shot possible at a long and healthy life, by practicing simple preventative care. We even provide an online Pet Portal where you can view all your pet’s diagnostic results, treatment plans, vaccination and diagnostic schedules, prescriptions, and any other health records.</p>
</article>
<aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
<h3>Keeping your pet's chompers clean and healthy</h3>
<p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
<p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
</aside>
</div> Как мы видим в примере, контент у нас находится выше сайдбара, но чтобы его переместить в браузере переместить вправо нужно добавить несколько классов:
<article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
...
</article>
<aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
...
</aside> Помимо классов, которые мы делали в прошлом уроке, мы добавляем еще col-lg-push-3 col-sm-push-4 к тегу <article>, это означает, что нужно переместить нашу колонку с контентом в большой сетке вправо на 3 колонки (именно столько занимает сайдбар в большой сетке), и так же переместить вправо на 4 колонки в маленькой сетке (столько занимает сайдар в маленькой сетке).
А к тегу <aside> мы добавим смещение влево col-lg-pull-9 col-sm-pull-8, но хочу заметить, что здесь мы смещаем на число, занимаемое в определенной сетке статьей +1. Почему +1 — потому что у нас у <article> еще есть дополнительная невидимая колонка, которую мы создавали для добавления отступа между колонками.
Готово, теперь мы умеем переставлять колонки местами.