refactor

src/components/SearchResults.vue

 <template>
   <section id="search_results" :class="$vuetify.breakpoint.name">
     <Pagination @update-page="$emit('update-page')"/>
-    <div class="flex-container" :class="$vuetify.breakpoint.name">
+    <div class="flex-container">
 
-       <div class="hits" v-if="$vuetify.breakpoint.smAndDown">
+       <div class="hits" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.smAndDown">
         <div  class="article_container" v-for="(result, index) in results_bm.concat(results_nn)" :key="index + id_hash"
         :style="'order:'+(index < results_bm.length? 2*index : ((index-results_bm.length)*2) + 1)">
           <Article
@@ -16,7 +16,7 @@
         </div>
       </div>
 
-      <div class="hits" v-if="$vuetify.breakpoint.mdAndUp">
+      <div class="hits" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp">
         <div  class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash">
           <Article
               :article="result"
@@ -26,7 +26,7 @@
           </Article>
         </div>
       </div>
-      <div class="hits" v-if="$vuetify.breakpoint.mdAndUp">
+      <div class="hits" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp">
         <div class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash">
           <Article
               :article="result"
@@ -118,20 +118,20 @@ export default {
     padding: 20px 0px 20px 0px;
   }
 
-  .hits {
-    min-width: 50%;
+  .flex-container {
+    display: flex;
   }
 
-
-  .flex-container.md, .flex-container.lg, .flex-container.xl {
-    display: flex;
+  .hits {
+    min-width: 50%;
   }
 
-  
-  .flex-container.xs .hits, .flex-container.sm .hits {
+  .hits.sm, .hits.xs {
+    min-width: 100%;
     display: flex;
     flex-direction: column;
   }
+ 
 
 
   .results-count {