move Recommendations and Permissions cards; set to 3 columns (#13687)

Author: eviljeff

src/amo/components/AddonRecommendations/styles.scss

@@ -8,7 +8,12 @@
       // overriding default Search Results styles
       @include respond-to(large) {
         grid-auto-flow: initial;
-        grid-template-columns: repeat(2, 50%);
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @include respond-to(extraLarge) {
+        grid-auto-flow: initial;
+        grid-template-columns: repeat(3, 1fr);
       }
 
       .SearchResult {

src/amo/components/AddonsByAuthorsCard/styles.scss

@@ -62,11 +62,11 @@
 .AddonsByAuthorsCard:not(.AddonsByAuthorsCard--theme) {
   .Card-contents .AddonsCard-list {
     @include respond-to(large) {
-      grid-template-columns: repeat(1, 1fr);
+      grid-template-columns: repeat(2, 1fr);
     }
 
-    @include respond-to(extraExtraLarge) {
-      grid-template-columns: repeat(2, 1fr);
+    @include respond-to(extraLarge) {
+      grid-template-columns: repeat(3, 1fr);
     }
   }
 }

src/amo/pages/Addon/index.js

@@ -277,7 +277,7 @@ export class AddonBase extends React.Component {
     );
   }
 
-  renderShowMoreCard() {
+  renderAboutThisCard() {
     const { addon, i18n } = this.props;
 
     let showAbout;
@@ -547,21 +547,21 @@ export class AddonBase extends React.Component {
                 </Card>
               ) : null}
 
-              {this.renderShowMoreCard()}
+              {this.renderAboutThisCard()}
 
               {this.renderRatingsCard()}
-
-              {this.renderRecommendations()}
             </div>
 
-            <ContributeCard addon={addon} />
-
             <PermissionsCard version={currentVersion} />
 
             <AddonMoreInfo addon={addon} />
 
+            <ContributeCard addon={addon} />
+
             {this.renderVersionReleaseNotes()}
 
+            {this.renderRecommendations()}
+
             {this.renderAddonsByAuthorsCard({ isForTheme: false })}
           </div>
         </div>