1

Подскажите, пожалуйста, как реализовать это посредством css flexbox. Оба блока max-width: 30em. Очень желательно с минимумом кода.

.parent {
   display: flex;
   flex-wrap: wrap;
}
.parent li {
   flex: 1 1 320px;
   max-width: 30em;
}
 .parent > li {
   flex-direction: column-reverse;
}

 <ul class="parent">
    <li>Column One</li>
    <li>Column Two</li>
 </ul>

Вот так не работает. Суть в том, чтобы блок A на десктопе был слева, а на мобильном снизу.

введите сюда описание изображения

4
  • 1
    в медиа запросе просто напишите flex-wrap: wrap и всё 15 ноя 2019 в 15:38
  • @MaximLensky или order ?
    – Leks
    15 ноя 2019 в 16:57
  • @Leks ордер это разумеется 15 ноя 2019 в 17:47
  • @ MaximLensky ясно :))
    – Leks
    15 ноя 2019 в 17:51

1 ответ 1

1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -25px;
}

.block {
  width: 50%;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
}

.block:nth-child(1) {
  background: #3498db;
}

.block:nth-child(2) {
  background: #2ecc71;
}

@media screen and (max-width: 767px) {
  .block {
    width: 100%;
  }
  .block:nth-child(1) {
    order: 2;
  }
}
<div class="container">
  <div class="block">a</div>
  <div class="block">b</div>
</div>

2
  • Спасибо, работает :) А без медиа-запроса нельзя это реализовать?
    – Linne
    16 ноя 2019 в 5:51
  • @Linne, нет, у вас 2 среды - desktop & mobile, как дать понять браузеру что есть mobile? только media
    – meine
    16 ноя 2019 в 6:12

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.