flapflapjack
@flapflapjack
на треть я прав

Как поменять местами блоки при сужении страницы?

Дратути!

На странице при выводе списка новостей, каждая новость выводится, как:
-картинка новости
-заголовок
-текст

Тут никаких проблем нет, и вот то что у меня есть в данный момент:

JSFiddle

HTML
<div class="bodynews_block">
<div class="news_image">Image</div>
<div class="news_title">
Title
</div>
<div class="news_text">
Bla bla bla lorem Ipsum!
Bla bla bla lorem Ipsum!
Bla bla bla lorem Ipsum!
Bla bla bla lorem Ipsum!
</div>
</div>

CSS
* {
  margin: 0px;
  padding: 0px;
}
.bodynews_block {
  width:100%;
  border: 1px blue solid;
  display: table-cell;
}

.news_image {
  background-color: orange;
  width: 30%;
  min-width:300px;
  height: 200px;
  float:left;
}

.news_title {
  background-color: lightblue;
  width:100%;
}

.news_text {
  background-color: red;
  width:100%;
}

@media (max-width:600px) {
  
  .news_image {
    width:100%;
  }
  .news_title {
    width:100%;
  }
  .news_text {
    width:100%;
  }
  
}



Слева - картинка, справа - заголовок, и текст.

При сужении страницы хочу сделать все блоки друг под другом, что собственно и указано в медиа-запросе в CSS. Но получается слишком нелепо - картинка новости висит выше, чем заголовок. Хочется поменять их местами, чтобы на узком экране порядок был не "картинка-заголовок-текст", а "Заголовок-картинка-текст".

Пояснение

Вид при широком окне:
5c54b718de3b4428028221.png
Вид при узком окне сейчас (неправильный вариант):
5c54b73dcb99e332689754.png
Вид, который нужен при узком окне (желаемый вариант):
5c54b7968b534267590206.png


Я пытался при сужении, в медиа-запросе добавить картинке float: right, а заголовку - left, но это не помогает.

В приницпе это и не должно помогать.

Подскажите пожалуйста, как это сделать средствами CSS и HTML.
Я если честно даже не знаю, реализуется ли вообще это без использования JS?
  • Вопрос задан
  • 1160 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Это делается флексами, за порядок элементов отвечает свойство order.
вот так https://jsfiddle.net/38zvd5Ls/

p.s. еще можно гридами, тогда и вначале без флоатов будет хорошо.

p.p.s. фу-фу так делать:
* {
  margin: 0px;
  padding: 0px;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
djQuery
@djQuery
"Кодируем помаленьку" ("Сказка о Тройке")))
Смотрите в сторону flex, например, здесь
Ответ написан
Комментировать
yudinikita
@yudinikita
Инженер-программист из России
Переверстайте через flex: https://html5book.ru/css3-flexbox/
И используете свойство order: https://developer.mozilla.org/ru/docs/Learn/CSS/CS...
Ответ написан
Комментировать
it_proger29
@it_proger29
Битрикс
Попробуй Bootstrap 4.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы