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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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