Flexbox:在移动设备上将2列折叠为单列，但重新排列元素

Flexbox是一种用于网页布局的CSS模块，它提供了一种灵活的方式来排列和对齐元素。在移动设备上，我们可以使用Flexbox将两列折叠为单列，并重新排列元素。

Flexbox的优势在于它可以自动调整元素的大小和位置，以适应不同屏幕尺寸和设备方向。通过使用Flexbox，我们可以轻松地实现响应式布局，使网页在不同设备上都能良好地显示。

在将两列折叠为单列的情况下，我们可以使用Flexbox的flex-direction属性来控制元素的排列方向。默认情况下，flex-direction的值为row，表示元素水平排列。我们可以将其设置为column，使元素垂直排列。

以下是一个示例代码，展示了如何使用Flexbox将两列折叠为单列，并重新排列元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
    }
    
    .item {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
    <div class="item">元素3</div>
    <div class="item">元素4</div>
  </div>
</body>
</html>

在上面的代码中，我们创建了一个包含四个元素的容器，并将容器的display属性设置为flex，以启用Flexbox布局。然后，我们将容器的flex-direction属性设置为column，使元素垂直排列。通过给每个元素添加margin-bottom属性，我们可以在元素之间添加一定的间距。

推荐的腾讯云相关产品和产品介绍链接地址：