使用Angular Flex布局在上方放置元素

Question

我不熟悉使用Flex Layout获取响应屏幕，当屏幕小于500px时，我很难将3个元素定位在元素上方。

左元素总是在右3个元素的上方，我需要按以下顺序将右3个元素放在左元素的上方：

目前，我得到以下结果：

div表

div元素1

div元素2

div元素3

我需要以下结果：

div元素1> div元素2> div元素3

div表

全屏显示时，我需要的结果，但非全屏显示时，我需要表格上方的3个元素。

在我的 component.html中：

<div fxLayout="column" fxLayoutAlign="start" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start">


    <div class="widget red" fxFlex="100">
        <h2>Table Content Here</h2>
        <h6>..................</h6>
        <h6>..................</h6>
        <h6>..................</h6>
    </div>

    <div class="widget green" fxFlex="100" fxFlex.gt-sm="20" flexOrder="1">

        <widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column">
            <div class="widget-front mat-elevation-z1">
                <div class="pl-16 pr-8 py-16 h-52 yellow" fxLayout="row" fxLayoutAlign="start start">
                </div>

                <div fxLayout="column" fxLayoutAlign="center center">
                    Content 1
                </div>
            </div>
        </widget>

        <widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column">
            <div class="widget-front mat-elevation-z1">
                <div class="pl-16 pr-8 py-16 h-52 blue" fxLayout="row" fxLayoutAlign="start start">
                </div>

                <div fxLayout="column" fxLayoutAlign="center center">
                    Content 2
                </div>
            </div>
        </widget>

        <widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column">
            <div class="widget-front mat-elevation-z1">
                <div class="pl-16 pr-8 py-16 h-52 blue" fxLayout="row" fxLayoutAlign="start start">
                </div>

                <div fxLayout="column" fxLayoutAlign="center center">
                    Content 3
                </div>
            </div>
        </widget>
    </div>
</div>