我几乎完成了我的宠物项目，显示了大学的时间表为小组/教师的日期/月份。现在我在控制器中得到一个方法，它返回按日期排序的结果，而不是按请求的数字排序的结果：

@GetMapping("/schedule")
public String getFilter(@Valid @ModelAttribute(value = "lessonFilterDto") LessonFilterDto lessonFilterDto,
        BindingResult bindingResult, Model model) {
    logger.debug("getSchedule()");
    prepareModel(model);
    if (!bindingResult.hasErrors()) {
        if (lessonFilterDto.isEmpty()) {
            lessonFilterDto = new LessonFilterDto(null, null, 1, LocalDate.now());
            model.addAttribute("lessonFilterDto", lessonFilterDto);
        } else {
            List<LessonDto> report = lessonService.getSchedule(lessonFilterDto);
            if (!report.isEmpty()) {
                model.addAttribute("lessons", report);
            }
        }
    }
    return "schedule/schedule";
}

它运行良好，我可以在浏览器中看到排序列表，代码如下：

<table class="table table-stripped">
                <thead>
                    <tr>
                        <td><strong>Date</strong></td>
                        <td><strong>Time Slot</strong></td>
                        <td><strong>Course</strong></td>
                    </tr>
                </thead>
                <th:block th:each="lesson:${lessons}">
                    <tbody>
                        <tr>
                            <td th:text="${#temporals.format(lesson.date, 'dd.MM.yyyy')}"></td>
                            <td th:text="${lesson.timeSlotNumber}"></td>
                            <td th:text="${lesson.courseName}"></td>
                        </tr>
                    </tbody>
                </th:block>
            </table>

但我真正想看到的是日程安排看起来像日历，在头上的一个槽（卡）中显示日期（只有天数），然后逐行显示所有课程。我想了想阿尔多里姆，这样做，它看起来像：如果只有一个日期显示只有一张卡/否则整个月找出-1天的当月-星期几，链接这张卡与这一天填写所有卡与输入数据。我自己画：

我写道：

<div class="container-sm">
                <div class="row">
                    <div class="col">Monday</div>
                    <div class="col">Tuesday</div>
                    <div class="col">Wednesday</div>
                    <div class="col">Thursday</div>
                    <div class="col">Friday</div>
                    <div class="col">Saturday</div>
                    <div class="col">Sunday</div>
                </div>
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Date(only day)</h5>
                            <p class="card-text">"${lesson.timeSlotNumber}" "${lesson.courseName}"</p>
                        </div>
                    </div>
                </div>
                <div class="row"></div>
                <div class="row"></div>
                <div class="row"></div>
                <div class="row"></div>
                <div class="row"></div>
            </div>
        </div>

和口吃（如何找到第一张卡？如何正确填写数据？提前谢谢。
upd:现在我需要的所有信息都在ui中了-但宽度不同（

我可以通过col使所有列的宽度相同吗？或者需要用table来寻找解决方案？