diff --git a/resources/css/components/post-grid.css b/resources/css/components/post-grid.css
index 5c5b815..24b0cba 100644
--- a/resources/css/components/post-grid.css
+++ b/resources/css/components/post-grid.css
@@ -3,7 +3,7 @@
     /* @apply flex flex-col md:grid  md:grid-cols-2 gap-4 md:items-center justify-between pb-12; */
     @apply pb-12 grid grid-cols-2  gap-4 gap-y-8 items-end;
     .post-count {
-      @apply flex items-end gap-2;
+      @apply flex items-end gap-2 col-span-1;
 
       &__count {
         @apply font-normal uppercase fjalla;
@@ -16,7 +16,7 @@
     }
 
     .search-bar {
-      @apply md:justify-self-end text-primary relative;
+      @apply md:justify-self-end text-primary relative w-full md:max-w-[500px];
 
       &:after {
         @apply absolute  top-1/2 -translate-y-1/2;
@@ -31,12 +31,11 @@
         background-size: contain;
       }
       input {
-        @apply w-full md:w-auto !py-4 px-4 border border-primary rounded-full text-base;
+        @apply w-full  !py-4 px-4 border border-primary rounded-full text-base;
         padding-right: 33px;
         line-height: 1.5;
         height: auto;
-        width: 500px;
-        max-width: 100%;
+
         &::placeholder {
           @apply !text-base font-normal text-carhop-green-700;
         }
@@ -62,10 +61,11 @@
     }
 
     select[name='sort_by'] {
-      @apply pr-12 w-fit  justify-self-end;
+      @apply pr-12 w-fit  justify-self-end col-span-1;
     }
   }
   .search-by {
+    @apply col-span-2 md:col-span-1;
     &__label {
       @apply text-primary font-semibold nunito;
     }
@@ -89,7 +89,7 @@
     }
   }
   &__toolbar-actions {
-    @apply flex flex-wrap items-center gap-4 justify-self-end;
+    @apply flex flex-wrap md:items-center gap-4 justify-self-end w-full md:justify-end col-span-2 md:col-span-1;
 
     select[name='etiquettes'] {
       /* @apply bg-blue-300; */
diff --git a/template-parts/articles/articles-grid.php b/template-parts/articles/articles-grid.php
index 3453701..0e21774 100644
--- a/template-parts/articles/articles-grid.php
+++ b/template-parts/articles/articles-grid.php
@@ -48,19 +48,6 @@ $thematiques = get_terms(array(
 				</div>
 
 			</div>
-			<select name="sort_by">
-				<option value="date_desc" selected><?php _e('Numéros récents en premier', 'dynamiques'); ?></option>
-				<option value="date_asc"><?php _e('Numéros anciens en premier', 'dynamiques'); ?></option>
-				<option value="title_asc"><?php _e('Par ordre alphabétique', 'dynamiques'); ?></option>
-			</select>
-			<h2 class="post-count">
-				<span class="post-count__count">
-					<?php echo $post_count; ?>
-				</span>
-				<span class="post-count__text">
-					<?php _e('articles', 'dynamiques'); ?>
-				</span>
-			</h2>
 			<div class="post-grid__toolbar-actions" data-post-type="articles">
 				<div class="search-bar">
 					<input type="text" placeholder="<?php _e('Rechercher par mot-clé', 'dynamiques'); ?>">
@@ -84,6 +71,21 @@ $thematiques = get_terms(array(
 
 
 			</div>
+			<h2 class="post-count">
+				<span class="post-count__count">
+					<?php echo $post_count; ?>
+				</span>
+				<span class="post-count__text">
+					<?php _e('articles', 'dynamiques'); ?>
+				</span>
+			</h2>
+
+			<select name="sort_by">
+				<option value="date_desc" selected><?php _e('Numéros récents en premier', 'dynamiques'); ?></option>
+				<option value="date_asc"><?php _e('Numéros anciens en premier', 'dynamiques'); ?></option>
+				<option value="title_asc"><?php _e('Par ordre alphabétique', 'dynamiques'); ?></option>
+			</select>
+