html - 需要单个 HTML 结构作为桌面和移动设备的附加屏幕截图，无需重复元素。 flexbox 有可能吗？

Question

如果可以使用 flexbox 布局实现，则需要 HTML 和 CSS 代码。

attached layout for desktop(left) & mobile (right)

Answer 1

使用 display:flex 您可以设置元素的顺序并在移动设备上更改顺序。

.fruit-holder {
  display: flex;
}

.banana {
  order: 3;
}

.apple {
  order: 2;
}

.orange {
  order: 1;
}

/* below is code for mobile */
@media (max-width: 800px) {
.banana {
  order: 1;
}

.apple {
  order: 2;
}

.orange {
  order: 3;
}
}

<div class="fruit-holder">
  <div class="banana">Banana</div>
  <div class="apple">Apple</div>
  <div class="orange">Orange</div>
</div>