combining flex wrapper modifier into person modifier as the styles are...

combining flex wrapper modifier into person modifier as the styles are becoming to specific to the person section to justify having another modifier

opentech/public/people/templates/people/person_page.html

@@ -3,7 +3,7 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 {% block content %}
-<section class="wrapper wrapper--small wrapper--flex wrapper--person">
+<section class="wrapper wrapper--small wrapper--person">
     <div>
         {% for person_type in page.person_types.all %}
             <h5 class="heading heading--no-margin">{{ person_type }}</h5>

opentech/static_src/src/sass/components/_wrapper.scss

@@ -140,23 +140,26 @@
         padding-bottom: 3rem;
     }
 
-    &--flex {
+    &--person {
         display: flex;
-    }
+        flex-direction: column;
+        padding: 20px 0;
 
-    &--person {
-        padding: 3rem 0;
+        @include media-query(tablet-portrait) {
+            flex-direction: row;
+            padding: 3rem 0;
+
+            > div:last-child {
+                flex-basis: 210px;
+            }
+        }
 
         > div:first-child {
             flex: 1;
 
-            @include media-query(tablet-landscape) {
+            @include media-query(tablet-portrait) {
                 padding-right: 20px;
             }
         }
-
-        > div:last-child {
-            flex-basis: 210px;
-        }
     }
 }