Question

我有以下代码，其中flex-parent类充当容器，flex-col类用于列：

.flex-parent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.flex-parent .flex-col {
    flex: 1;
    margin-left: 5em;
}

<div class="container-fluid page page-dashboard flex-parent">
    <div class="flex-col widget-row">
        <div class="selector-wrapper">
            <div ng-repeat="(key, widget) in $ctrl.widgets" class="widget-selectors aligner">
                <span class="widget-name-selectors" ng-class="{'selected-dashboard-item': !widget.hidden, 'not-selected-dashboard-item': widget.hidden}" ng-click="$ctrl.toggleVisibility(widget)">
                        {{widget.name}}
                    </span>
            </div>
        </div>
        <div ng-repeat="bag in $ctrl.bags" dragula="'bag-one'" class="col-sm-12 bag flex-container" dragula-scope="$parent" id="widget-{{$index}}" dragula-model="bag">
            <div class="bag-item col-sm-6 flex-item" ng-repeat="item in bag" ng-style="item.style" id="item-{{item.id}}" ng-hide="item.hidden">
                <div class="panel-heading">{{item.name}}</div>
                <widget widget="item"></widget>
            </div>
        </div>
    </div>
    <div class="flex-col">
        <w-priority-tasks ng-if="::($ctrl.priorityTasks && $ctrl.priorityTasks.length)" task-list="::$ctrl.priorityTasks"></w-priority-tasks>
    </div>
</div>

现在两列是我想要的方式，底部的div出现在最右边。但是，当视图从桌面缩小到iPad时，我希望最右边的列显示在顶部。如何使用flexbox完成此操作？

Answer 1

使用flex-direction: row-reverse;来反转弹性项目的顺序

在iPad视图中，如何将我的双列布局的右栏放在顶部？

1 个答案: