Как вставить банер посреди новостной ленты на чистом css(крайне JS)?

Question

[Александр Иванов]

Допустим на главной у меня 6 новостей. Нужно вставить банер между этими новостями.
На css есть свойство которое меня часто выручает nth-child, но как его применить к задаче на картинке не догоняю.

<div id="baner"></div >
<div class="news"></div >
<div class="news"></div >
<div class="news"></div >
<div class="news"></div >
<div class="news"></div >
<div class="news"></div >

htmlbook.ru/css/nth-child

Comments

[Kuat Mustafin]

Если вам известно количество новостей и т.д попробуйте order через Flexbox

[Kuat Mustafin]

frontender.info/a-guide-to-flexbox

Answer 1

[Kuat Mustafin]

Можно с помощью FlexBox пример на codepen.io

Про FlexBox: на русском и английском

Поддержка FlexBox caniuse.com

Comments

[Александр Иванов]

Ответ хороший отмечу решением. Однако на ios 4-летней давности и android интернет браузер, это работать не будет, да и на старых браузерах тоже. Они не знают flex, уже сталкивался с таким.

[Kuat Mustafin]

cimonlebedev: согласен, к сожалению это большой такой большой минус FlexBox'а