diff --git a/app/assets/javascripts/my_modules/protocols.js b/app/assets/javascripts/my_modules/protocols.js
index 5edc8cdab..49cebca26 100644
--- a/app/assets/javascripts/my_modules/protocols.js
+++ b/app/assets/javascripts/my_modules/protocols.js
@@ -440,7 +440,13 @@ function initImport() {
   });
 }
 
-
+function initDetailsDropdown() {
+  $('#task-details .task-section-caret').on('click', function() {
+    if (!$('.task-details').hasClass('collapsing')) {
+      $(this).closest('#task-details').toggleClass('expanded');
+    }
+  });
+}
 
 function initProtocolSectionOpenEvent() {
   $('#protocol-container').on('shown.bs.collapse', function() {
@@ -465,6 +471,7 @@ function init() {
   refreshProtocolStatusBar();
   initImport();
   initProtocolSectionOpenEvent();
+  initDetailsDropdown();
 }
 
 init();
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 6378f258d..4caaf2a0f 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -507,26 +507,53 @@
 }
 
 .task-information {
-  column-gap: 1em;
-  display: grid;
-  grid-template-columns: auto minmax(max-content, 18em);
-
   .task-section-header {
-    grid-column: 1 / span 1;
+    align-items: center;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    width: 100%;
   }
 
-  .task-details {
-    grid-column: 1 / span 1;
-    grid-row: 2 / span 1;
+  .btn {
+    min-width: 230px;
   }
 
   .task-flows {
-    grid-column: 2 / span 1;
-    grid-row: 1 / span 2;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    #dropdownTaskFlowList {
+      min-width: 230px;
+    }
 
     .status-label {
       @include font-small;
+      flex-basis: 40%;
       font-weight: bold;
+      margin-right: .5em;
+      text-align: right;
+
+      .status-note {
+        font-weight: normal;
+      }
+    }
+
+    .status-flow-dropdown {
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .status-buttons {
+      align-items: flex-end;
+      display: flex;
+      flex-grow: 1;
+
+      :not(:first-child):not(.dropdown-menu) {
+        margin-left: .5em;
+      }
     }
 
     .status-transition-error {
@@ -541,7 +568,62 @@
   }
 }
 
-@media (max-width: 700px) {
+.task-information .expanded {
+  align-items: flex-start;
+  height: 50px;
+
+  .task-flows,
+  .status-label,
+  .status-buttons {
+    display: block;
+    max-width: 230px;
+  }
+
+  .status-label {
+    margin: 0;
+    text-align: left;
+  }
+
+  .status-flow-dropdown {
+    margin: 0;
+  }
+
+  .status-buttons :not(:first-child):not(.dropdown-menu) {
+    margin-left: 0;
+    margin-top: .5em;
+  }
+
+  .modal .modal-footer .btn {
+    margin-top: 0;
+  }
+}
+
+@media (max-width: 810px) {
+  .task-information .task-section-header {
+    display: block;
+
+    .task-flows,
+    .status-label,
+    .status-buttons {
+      display: block;
+      max-width: 230px;
+    }
+
+    .status-label {
+      margin: 0;
+      text-align: left;
+    }
+
+    .status-buttons :not(:first-child):not(.dropdown-menu) {
+      margin-left: 0;
+      margin-top: .5em;
+    }
+  }
+
+  .task-information .expanded {
+    height: auto;
+  }
+
   .content-pane.my-modules-protocols-index {
     padding: 10px 0 0 0;
   }
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index 460d39d40..cb75556ff 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -40,35 +40,38 @@
 <div class="content-pane my-modules-protocols-index" data-task-id="<%= @my_module.id %>">
   <div class="my-module-position-container">
     <!-- Details -->
-    <div class="task-section task-information">
-      <div class="task-section-header">
-        <span id="taskDetailsLabel" class="task-section-title">
-          <h2>
-            <%= t('my_modules.details.title') %>
-          </h2>
-        </span>
-        <span class="dropdown task-details-dropdown-container">
-          <a href="#"
-            id="taskDetailsButton"
-            class="block-icon task-details-button dropdown-toggle"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="true">
-            <i class="fas fa-info-circle"></i>
+    <div class="task-section task-information hidden">
+      <div id="task-details" class="task-section-header">
+        <div class="task-flows">
+          <%= render partial: 'my_modules/status_flow/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
+        </div>
+        <div class="task-details-container">
+          <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">
+            <i class="fas fa-caret-right"></i>
+            <span id="taskDetailsLabel" class="task-section-title">
+              <h2>
+                <%= t('my_modules.details.title') %>
+              </h2>
+            </span>
           </a>
-          <div class="dropdown-menu" aria-labelledby="taskDetailsButton">
-            <%= render partial: "module_header_details_popover.html.erb" %>
-          </div>
-        </span>
-
-
+          <span class="dropdown task-details-dropdown-container">
+            <a href="#"
+              id="taskDetailsButton"
+              class="block-icon task-details-button dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="true">
+              <i class="fas fa-info-circle"></i>
+            </a>
+            <div class="dropdown-menu" aria-labelledby="taskDetailsButton">
+              <%= render partial: "module_header_details_popover.html.erb" %>
+            </div>
+          </span>
+        </div>
       </div>
-      <div class="task-details">
+      <div id="details-container" class="task-details collapse">
         <%= render partial: 'my_module_details' %>
       </div>
-      <div class="task-flows">
-        <%= render partial: 'my_modules/status_flow/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
-      </div>
     </div>
     <!-- Notes -->
     <div class="task-section hidden">
diff --git a/app/views/my_modules/status_flow/_task_flow_button.html.erb b/app/views/my_modules/status_flow/_task_flow_button.html.erb
index e999289a8..c4dadb8be 100644
--- a/app/views/my_modules/status_flow/_task_flow_button.html.erb
+++ b/app/views/my_modules/status_flow/_task_flow_button.html.erb
@@ -1,75 +1,79 @@
 <% status = my_module.my_module_status %>
 <div class="status-label">
   <%= t('my_module_statuses.dropdown.status_label') %>
-</div>
-<div class="dropdown sci-dropdown status-flow-dropdown"
-     data-status-changing="<%= my_module.status_changing %>"
-     data-status-check-url="<%= status_state_my_module_path(my_module) %>">
-  <button class="btn btn-secondary dropdown-toggle <%= 'disabled' if my_module.status_changing || my_module.archived_branch? %>"
-          type="button"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="true"
-          style="<%= "background-color: #{status.color}" %>;">
-    <span>
-      <% if my_module.status_changing %>
-        <i class="fas fa-spinner fa-spin"></i>
-        <span><%= t('my_module_statuses.dropdown.status_transitioning_label') %></span>
-      <% end %>
-      <%= status.name %>
-    </span>
-    <span class="caret pull-right"></span>
-  </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownTaskFlow" id="dropdownTaskFlowList" data-link-url="<%= update_state_my_module_url(my_module) %>">
-    <% if can_update_my_module_status?(@my_module) %>
-      <% unless status.initial_status? %>
-        <% previous_s = status.previous_status %>
-        <% previous_s_errors = previous_s.conditions_errors(my_module) %>
-        <li data-state-id="<%= previous_s.id %>" id="previousStatusSelector" class="<%= 'disabled' if previous_s_errors.any? %>">
-          <span><%= t('my_module_statuses.dropdown.return_label') %></span>
-          <i class="fas fa-long-arrow-alt-right"></i>
-          <div class=" status-container">
-            <div class="status-name" style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></div>
-          </div>
-        </li>
-        <span class="error-message"><% previous_s_errors.each do |error| %>
-            <%= error %><br>
-          <% end %></span>
-      <% end %>
-
-      <% unless status.final_status? %>
-        <% next_s = status.next_status %>
-        <% next_s_errors = next_s.conditions_errors(my_module) %>
-        <li data-state-id="<%= next_s.id %>" id="nextStatusSelector" class="<%= 'disabled' if next_s_errors.any? %>">
-          <span><%= t('my_module_statuses.dropdown.move_label') %></span>
-          <i class="fas fa-long-arrow-alt-right"></i>
-          <div class="status-container">
-            <div class="status-name" style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></div>
-          </div>
-        </li>
-        <span class="error-message" data-errors-for="next-status"><% next_s_errors.each do |error| %>
-            <%= error %><br>
-          <% end %></span>
-      <% end %>
-    <% else %>
-      <span class="error-message permission-error"><%= t('my_module_statuses.dropdown.no_permission_label') %></span>
-    <% end %>
-    <li id="viewTaskFlow">
-      <%= t('my_module_statuses.dropdown.view_flow_label') %>
-    </li>
-  </ul>
-</div>
-<% if my_module.last_transition_error %>
-  <div class="status-transition-error">
-    <i class="fas fa-exclamation-triangle"></i>
-    <% case my_module.last_transition_error["type"] %>
-    <% when "repository_snapshot" %>
-      <%= t(
-        "my_modules.status_error.repository_snapshot",
-        repository: Repository.find(my_module.last_transition_error["repository_id"]).name
-      ) %>
-    <% else %>
-       <%= t("my_modules.status_error.general") %>
+  <div class="status-note">
+    <% if my_module.last_transition_error %>
+      <div class="status-transition-error">
+        <i class="fas fa-exclamation-triangle"></i>
+        <% case my_module.last_transition_error["type"] %>
+        <% when "repository_snapshot" %>
+          <%= t(
+            "my_modules.status_error.repository_snapshot",
+            repository: Repository.find(my_module.last_transition_error["repository_id"]).name
+          ) %>
+        <% else %>
+          <%= t("my_modules.status_error.general") %>
+        <% end %>
+      </div>
     <% end %>
   </div>
-<% end %>
+</div>
+<div class="status-buttons">
+  <div class="dropdown sci-dropdown status-flow-dropdown"
+      data-status-changing="<%= my_module.status_changing %>"
+      data-status-check-url="<%= status_state_my_module_path(my_module) %>">
+    <button class="btn btn-secondary dropdown-toggle <%= 'disabled' if my_module.status_changing || my_module.archived_branch? %>"
+            type="button"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="true"
+            style="<%= "background-color: #{status.color}" %>;">
+      <span>
+        <% if my_module.status_changing %>
+          <i class="fas fa-spinner fa-spin"></i>
+          <span><%= t('my_module_statuses.dropdown.status_transitioning_label') %></span>
+        <% end %>
+        <%= status.name %>
+      </span>
+      <span class="caret pull-right"></span>
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="dropdownTaskFlow" id="dropdownTaskFlowList" data-link-url="<%= update_state_my_module_url(my_module) %>">
+      <% if can_update_my_module_status?(@my_module) %>
+        <% unless status.initial_status? %>
+          <% previous_s = status.previous_status %>
+          <% previous_s_errors = previous_s.conditions_errors(my_module) %>
+          <li data-state-id="<%= previous_s.id %>" id="previousStatusSelector" class="<%= 'disabled' if previous_s_errors.any? %>">
+            <span><%= t('my_module_statuses.dropdown.return_label') %></span>
+            <i class="fas fa-long-arrow-alt-right"></i>
+            <div class=" status-container">
+              <div class="status-name" style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></div>
+            </div>
+          </li>
+          <span class="error-message"><% previous_s_errors.each do |error| %>
+              <%= error %><br>
+            <% end %></span>
+        <% end %>
+
+        <% unless status.final_status? %>
+          <% next_s = status.next_status %>
+          <% next_s_errors = next_s.conditions_errors(my_module) %>
+          <li data-state-id="<%= next_s.id %>" id="nextStatusSelector" class="<%= 'disabled' if next_s_errors.any? %>">
+            <span><%= t('my_module_statuses.dropdown.move_label') %></span>
+            <i class="fas fa-long-arrow-alt-right"></i>
+            <div class="status-container">
+              <div class="status-name" style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></div>
+            </div>
+          </li>
+          <span class="error-message" data-errors-for="next-status"><% next_s_errors.each do |error| %>
+              <%= error %><br>
+            <% end %></span>
+        <% end %>
+      <% else %>
+        <span class="error-message permission-error"><%= t('my_module_statuses.dropdown.no_permission_label') %></span>
+      <% end %>
+      <li id="viewTaskFlow">
+        <%= t('my_module_statuses.dropdown.view_flow_label') %>
+      </li>
+    </ul>
+  </div>
+</div>