funders page: responsive design for sorting actions

explore/src/app/funders/funders.component.html

@@ -42,18 +42,43 @@
   <ng-container *ngIf="!showLoading && funders?.length">
     <div class="uk-container uk-container-large" uk-height-match="target: .percentage;">
       <div id="target" class="uk-section" uk-height-match="target: .alias;">
-        <div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-middle uk-flex-between">
-          <ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
-            <li *ngFor="let item of groupedFunders; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
-              [class]="index == i ? 'uk-active':''" (click)="changeDisplayedFunders(i)">
-              <a class="uk-padding-remove">{{item.group}}</a>
-            </li>
-          </ul>
-          <div class="uk-width-medium">
-            <div input
-              type="select" placeholder="Show" inputClass="flat x-small"
-              [options]="options" [(value)]="sortBy" [disabled]="isDisabled"
-              (valueChange)="sortByChanged()"></div>
+        <!-- sorting desktop view -->
+        <div class="uk-visible@m">
+          <div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-middle uk-flex-between">
+            <ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
+              <li *ngFor="let item of groupedFunders; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
+                [class]="index == i ? 'uk-active':''" (click)="changeDisplayedFunders(i)">
+                <a class="uk-padding-remove">{{item.group}}</a>
+              </li>
+            </ul>
+            <div class="uk-width-medium">
+              <div input
+                type="select" placeholder="Show" inputClass="flat x-small"
+                [options]="options" [(value)]="sortBy" [disabled]="isDisabled"
+                (valueChange)="sortByChanged()"></div>
+            </div>
+          </div>
+        </div>
+        <!-- sorting mobile view -->
+        <div class="uk-hidden@m">
+          <div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-bottom uk-flex uk-flex-column uk-flex-middle">
+            <div class="uk-width-medium">
+              <div input
+                type="select" placeholder="Show" inputClass="flat x-small"
+                [options]="options" [(value)]="sortBy" [disabled]="isDisabled"
+                (valueChange)="sortByChanged()"></div>
+            </div>
+            <div class="uk-padding uk-padding-remove-horizontal" >
+              <div class="uk-margin-left uk-margin-small-bottom uk-text-meta uk-text-small">
+                Sort  Alphabetically
+              </div>
+              <ul class="uk-nav uk-nav-default uk-grid uk-grid-small uk-child-width-1-6" uk-grid>
+                <li *ngFor="let item of groupedFunders; let i = index;"
+                  [class]="index == i ? 'uk-active':''" (click)="changeDisplayedFunders(i)">
+                  <a class="uk-padding-remove">{{item.group}}</a>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
         <div class="uk-margin-large-bottom" uk-height-match="target: .name;">