如何将卡垂直排列成两列

Question

我需要将以下一组纸牌排列成两列，并一一垂直显示。这样我就可以在移动设备中按顺序排列。

我已经使用Flex布局来创建此布局，但是当卡的高度不同时却无济于事。

<div class="ui container">
  <div class="ui segment">About</div>
  <div class="ui segment">Video</div>
  <div class="ui segment">Experiences</div>
  <div class="ui segment">Preferences</div>
  <div class="ui segment">Skills</div>
  <div class="ui segment">Education</div>
  <div class="ui segment">Projects</div>
</div>

这里是Codepen example。

移动设计就是这样。

Answer 1

请使用以下之一：-

1. 引导程序-https://getbootstrap.com/ 这将为您提供12个网格的行列布局。这只是一个css文件。您只需使用CSS类就可以操纵不同屏幕的外观。

2. 媒体查询-Media Queries