diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 44c36f108..1be85a2be 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -1,10 +1,27 @@
 .groups-and-headings {
+  $spacing: rem-calc(4);
+
+  .headings-list {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin-left: -$spacing;
+  }
 
   .heading {
     border: 1px solid $border;
     border-radius: rem-calc(3);
-    display: inline-block;
     margin-bottom: $line-height / 2;
+    margin-left: $spacing;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      width: calc(100% / 3 - #{$spacing});
+    }
+
+    @include breakpoint(large) {
+      width: calc(100% / 6 - #{$spacing});
+    }
 
     a {
       display: block;
diff --git a/app/components/budgets/groups_and_headings_component.html.erb b/app/components/budgets/groups_and_headings_component.html.erb
index dfb997032..6c88b9850 100644
--- a/app/components/budgets/groups_and_headings_component.html.erb
+++ b/app/components/budgets/groups_and_headings_component.html.erb
@@ -1,9 +1,9 @@
 <div id="groups_and_headings" class="groups-and-headings">
   <% budget.groups.each do |group| %>
     <h2 id="<%= group.name.parameterize %>"><%= group.name %></h2>
-    <ul class="no-bullet" data-equalizer data-equalizer-on="medium">
+    <ul class="headings-list">
       <% group.headings.sort_by_name.each do |heading| %>
-        <li class="heading small-12 medium-4 large-2" data-equalizer-watch>
+        <li class="heading">
           <% unless budget.informing? || budget.finished? %>
             <%= link_to budget_investments_path(budget.id,
                                                 heading_id: heading.id) do %>