Как управлять расположением блоков при адаптивной верстке ?

@nepster · Регистрация: 19.09.2009

Author24 — интернет-сервис помощи студентам

Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой блок и поместить вперед, остальные два под него, вот таким образом (вложение).

Возможно ли такое реализовать без flexbox?

@tsj3amttaf · 19.10.2014, 07:01

Вам в помощь: HTMLBOOK.

@monochromer · 19.10.2014, 07:06

Красный блок в разметке расположить первым, но с помощью position:relative визуально сместить его и другие блоки.

С помощью bootstrap это можно сделать, например, так:

HTML5

<div class="container">
  <div class="row">
    <div class="col-xs-12  col-sm-4  col-sm-push-4">
        <div class="content red">1</div>
      </div>
    <div class="col-xs-6  col-sm-4 col-sm-pull-4">
        <div class="content">2</div>
      </div>
    <div class="col-xs-6  col-sm-4">
        <div class="content">3</div>
      </div>
  </div>
</div>

http://jsbin.com/jedecu/1/edit?html,output

@nepster · 19.10.2014, 15:05 **[ТС]**

большое спасибо. Я не знал, что так можно сделать на бутстрапе. Правда я использую его по минимуму и компилировал без сеток, но я глянул технологию реализации и организовал у себя. Еще раз большое спасибо.

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
		1
	Как управлять расположением блоков при адаптивной верстке ? 19.10.2014, 02:40. Показов 1592. Ответов 3 Метки нет (Все метки) Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой блок и поместить вперед, остальные два под него, вот таким образом (вложение). Возможно ли такое реализовать без flexbox? Миниатюры 0

@tsj3amttaf 3 / 3 / 2 Регистрация: 31.08.2014 Сообщений: 15
	19.10.2014, 07:01	2
	Вам в помощь: HTMLBOOK. 0

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	19.10.2014, 15:05 [ТС]	4
	большое спасибо. Я не знал, что так можно сделать на бутстрапе. Правда я использую его по минимуму и компилировал без сеток, но я глянул технологию реализации и организовал у себя. Еще раз большое спасибо. 0

Опции темы

Как управлять расположением блоков при адаптивной верстке ?

Решение