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

[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]

9 часов назад, Vlad_P сказал:

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

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

[MAzZY]

13 часа назад, wwt сказал:

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

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

[MAzZY]

24 минуты назад, MAzZY сказал:

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

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

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

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

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

[wwt]

8 часов назад, MAzZY сказал:

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

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