DEMO：21222

HTML：实际使用时，请将-改成_，其中pos=3取左侧默认菜单,mode=1显示图片标题概要，subli为了方便CSS

<div class="container subli py-5 px-md-0">
<div class="ul-col m-ul-n2 p-li-2 a-fst">
$func-submenu(border=border-gray-200 bg-gray-100 p-4 d-flex flex-column-reverse h-100 img-up,pos=3,memo=1,sub=0,mode=1,submemo=1,subimg=3,divi=none)$
</div>
</div>

CSS：

.subli {
    ul {
        li {
            .thumbs {
                margin-left: auto;
                margin-right: auto;
                width: 90px;
                height: 90px;
                overflow: hidden;
            }

            .mode {
                .title a {
                    font-size: 1.2rem !important;
                    font-weight: 800;
                }

                .memo {
                    display: none;
                }
            }
        }
    }
}

@include media-breakpoint-up(sm) {
    .subli {
        ul {
            li {

                .mode {
                    .title a {
                        font-size: inherit !important;
                    }

                    .memo {
                        display: block;
                        font-size: 1.2rem;
                        color: $gray-600;
                    }
                }
            }
        }
    }
}

@include media-breakpoint-up(md) {
    .subli {
        ul {
            li {
                flex-basis: 25%;
            }
        }
    }
}


@include media-breakpoint-up(lg) {
    .subli {
        ul {
            li {
                .thumbs {
                    width: 150px;
                    height: 150px;
                }

                .mode {
                    .title a {
                        font-size: inherit !important;
                    }
                }
            }
        }
    }
}