Wie kann ich die rechte Spalte meines zweifarbigen Layouts in der iPad-Ansicht oben platzieren?

Question

Ich habe den folgenden Code, mit einer flex-parent Klasse, die als Container und flex-col Klasse für die Spalten:

.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> 

jetzt die beiden Säulen sind so, wie ich sie will, mit dem div bei der Boden ganz rechts. Wenn die Ansicht jedoch vom Desktop zum iPad verkleinert wird, möchte ich, dass die Spalte ganz rechts oben angezeigt wird. Wie kann ich das mit Flexbox erreichen?

Answer 1

Verwendung flex-direction: row-reverse; die Reihenfolge der flexiblen Elemente