interleave nynorsk using css

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">
 
-      <ul class="hits" v-if="$vuetify.breakpoint.smAndDown">
-        <li  class="article_container" v-for="(result, index) in both_dicts" :key="index + both_hash">
+       <div class="hits" 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
+              
               :article="result"
               :title_id="`title_${index}`"
               @article-click="article_link_click"
               @details-click="details_click">
           </Article>
-        </li>
-      </ul>
-      <ul class="hits" v-if="!$vuetify.breakpoint.smAndDown && count_bm">
-        <li  class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash">
+        </div>
+      </div>
+
+      <div class="hits" v-if="$vuetify.breakpoint.mdAndUp">
+        <div  class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash">
           <Article
               :article="result"
               :title_id="`title_${index}`"
               @article-click="article_link_click"
               @details-click="details_click">
           </Article>
-        </li>
-      </ul>
-      <ul class="hits" v-if="!$vuetify.breakpoint.smAndDown && count_nn">
-        <li class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash">
+        </div>
+      </div>
+      <div class="hits" v-if="$vuetify.breakpoint.mdAndUp">
+        <div class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash">
           <Article
               :article="result"
               :title_id="`title_${index + results_bm.length}`"
@@ -33,8 +35,8 @@
               @details-click="details_click"
               :class="right_col_class_name">
           </Article>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
     <Pagination @update-page="$emit('update-page')" bottom/>
 
@@ -43,8 +45,6 @@
 </template>
 
 <script>
-const interleave = ([ x, ...xs ], ys = []) => x === undefined ? ys : [ x, ...interleave (ys, xs) ]
-
 import Article from './Article.vue'
 import Pagination from './Pagination.vue'
 export default {
@@ -68,8 +68,8 @@ export default {
       let merged = interleave(this.results_bm, this.results_nn)
       return merged
     },
-    both_hash: function(){
-      return this.both_dicts.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
+    id_hash: function(){
+      return this.results_bm.concat(this.results_nn).reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
     },
     bm_hash: function(){
       return this.results_bm.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
@@ -120,21 +120,19 @@ export default {
 
   .hits {
     min-width: 50%;
-
   }
 
-  .flex-container {
+
+  .flex-container.md, .flex-container.lg, .flex-container.xl {
     display: flex;
   }
 
-  .flex-container.xs, .flex-container.sm {
+  
+  .flex-container.xs .hits, .flex-container.sm .hits {
+    display: flex;
     flex-direction: column;
   }
 
-  .flex-container > ul {
-    padding: 0px !important;
-    min-width: 50%;
-  }
 
   .results-count {
     color: var(--v-primary-base);