Как реализовать смещение колонок на flex?

138
11 ноября 2021, 16:20

Подскажите, пожалуйста, как реализовать это посредством 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 на десктопе был слева, а на мобильном снизу.

Answer 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>

READ ALSO
Растянуть блок на всю высоту экрана (body)
HTML

Растянуть блок на всю высоту экрана (body)

Не могу растянуть контейнер на всю высоту body

 217
Как правильно вставлять символы
HTML

Как правильно вставлять символы

 176
Как сделать похожую таблицу в Qt?
c++

Как сделать похожую таблицу в Qt?

Я новичок в QtКак сделать похожую таблицу в Qt?

 171
Передать string в функцию, когда требуется char
c++

Передать string в функцию, когда требуется char

Подскажите, пожалуйста, как поступить в моей проблемеЕсть функция (библиотеки нестандартной), который в качестве аргумента требуется const char *

 111