Изменение порядка блоков

[MAzZY]

Доброго всем дня

Прошу помочь с адаптивной вёрсткой трёх блоков.

Код такой:

<div class="main-content">
	<div class="left-sidebar">левый сайдбар</div>
	<div class="content">центральный блок</div>
	<div class="right-sidebar">правый сайдбар</div>
</div>

.content, .left-sidebar {
	float: left;
}
.right-sidebar {
	float: right;
}

На полной версии (>1000px) это выглядит так:

 

А на меньших разрешениях должно быть так:

 

Никак не могу сообразить, как заставить их поменяться местами.

 

[Vlad_P]

flexbox тебе в помощь. через float никак

[wwt]

  On 9/7/2017 at 9:04 PM, Vlad_P said:

flexbox тебе в помощь. через float никак

Expand  

Очень даже как https://jsfiddle.net/o5ants3u/

[MAzZY]

  On 9/8/2017 at 6:15 AM, wwt said:

Очень даже как https://jsfiddle.net/o5ants3u/

Expand  

Спасибо, вариант хороший. Вот только проблема в том, что при таком подходе всё внутреннее содержимое сайдбаров ведёт себя совсем как попало. Да и тяжеловато настроить нормальные отступы между блоками.

[MAzZY]

  On 9/8/2017 at 8:01 PM, MAzZY said:

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

Expand  

Я понял, как это побороть.

Не нужно ставить float такой инструкцией

.main-content div {
  height: 100px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  float: left;
}

Достаточно прописать его у каждого блока. Тогда всё получается.

[wwt]

  On 9/8/2017 at 8:27 PM, MAzZY said:

Достаточно прописать его у каждого блока. Тогда всё получается.

Expand  

ну да, я просто упростил CSS, и всем внутренним блокам прописывался float поэтому содержимое плыло у тебя.