Как изменить порядок объектов на css?

Question

[akula22]

Есть такой HTML код:

<div class="news_box">
    <a href="/post/kwork-birzha-frilansa-novogo-pokoleniya/2"><img class="" src="/upload/images/post/small57a8b26a95082.jpg" alt=""></a>
    <div class="news_box_content">
        <p class="title">
            <a href="/post/kwork-birzha-frilansa-novogo-pokoleniya/2">KWORK — биржа фриланса нового поколения</a>        </p>
        <div class="clear: both"></div>
        <div class="text">
            какой-то текст
        </div> 
    </div>
</div>

и по умолчанию такой для него css-код

.news_box { margin-bottom:15px; border-bottom:1px #dedede solid;background: white;font-family: 'Open Sans';padding:8px; height: 120px; }
.news_box img {height: 100px; width: 177px; float:left;} 
.news_box_content {float: left; width: calc(100% - 177px);}
.news_box_content > .title {font-size: 17px;color:#505458;margin:-5px 0px 2px 5px; float:left;}
.news_box_content > .text { font-size: 14px;  float:left; overflow: hidden; margin:1px 5px 0px 5px;}

и выводит это все в таком порядке, сначала картинка, справа от нее заголовок, и ниже текст

Теперь я хочу для низких разрешений экрана изменить внешний вид, хочу заголовок поставить сверху над картинкой, а текст под картинкой

@media (max-width: 768px) {
  Что тут написать?
}

Answer 1

[Андрей Федоров]

Посмотрите flex order.

Answer 2

[Ankhena]

Непродуманное построение верстки.

1. Чтобы переставлять блоки местами с помощью CSS они должны быть на одном уровне.
Т.е. нужно перестроить HTML, а потом использовать flex order.

2. Другой вариант: news_box_content по высоте делать таким, чтобы в него поместилась и картинка и заголовок и текст. Заголовок прибиваете к его верху, текст к низу, а в образовавшееся пространство позиционируете картинку.
(Не буду писать, что я думаю об этом способе и тех, кто так делает)

3. Ну и еще есть JS, но в данном случае, это тоже не правильно.

Comments

[akula22]

а как построить HTML и CSS у вас нет примера?

[Ankhena]

В смысле примера? Как построить 3 блока один за другим?

codepen.io/anon/pen/bZQxQA например, так

Для обычного порядка убрать order

[akula22]

нет, на большом разрешение надо картинка, а справа от нее заголовок и текст [] = а при маленьком разрешение сделать как у вас в примере, заголовок, под ним картинка, под картинкой текст

[Ankhena]

akula22: ну значит, для большого разрешения замените column на row для родительского блока. Или без flex'а расположите блоки float'ами или как Вам удобнее.

Вопрос был как изменить порядок блоков с помощью CSS, ответ: с помощью flex и order

Answer 3

[HamSter]

например так.

С flex примерно так можно

Comments

[akula22]

у меня на сайте bootstrap, Ваши примеры не работают (

[HamSter]

akula22: =) нужно учиться уходить от бутстрапа. Либо на js делайте, что не уместно в верстке для такого.