diff --git a/app/assets/javascripts/repository_columns/index.js.erb b/app/assets/javascripts/repository_columns/index.js.erb
index 77d34f5d1..7d1da2db7 100644
--- a/app/assets/javascripts/repository_columns/index.js.erb
+++ b/app/assets/javascripts/repository_columns/index.js.erb
@@ -112,18 +112,18 @@
   function _insertNewListItem(column) {
     // remove element if already persent
     $('[data-id="' + column.id + '"]').remove();
-    var html = '<li class="list-group-item" data-id="' + column.id + '" ';
+    var html = '<li class="list-group-item row" data-id="' + column.id + '" ';
     html += 'data-destroy-url="' + column.destroy_html_url + '"';
-    html += 'data-edit-url="' + column.edit_url + '">';
-    html += '<span class="pull-left">' + column.name + '</span>';
-    html += '<span class="controlls pull-right">';
+    html += 'data-edit-url="' + column.edit_url + '"><div class="col-xs-8">';
+    html += '<span class="pull-left column-name">' + column.name + '</span>';
+    html += '</div><div class="col-xs-4"><span class="controlls pull-right">';
     html += '<button class="btn btn-default" data-action="edit">';
     html += '<span class="fas fa-pencil-alt"></span>&nbsp;';
     html += '<%= I18n.t "libraries.repository_columns.index.edit_column" %></button>&nbsp;';
-    html += '<button class="btn btn-default" data-action="destroy">';
+    html += '<button class="btn btn-default delete-column" data-action="destroy">';
     html += '<span class="glyphicon glyphicon-trash"></span>&nbsp;';
     html += '<%= I18n.t "libraries.repository_columns.index.delete_column" %>';
-    html += '</button></span></li>';
+    html += '</button></span></div></li>';
     $(html).insertBefore('.repository-columns-body ul li:first')
            .promise()
            .done(function() {
diff --git a/app/assets/stylesheets/themes/repositories.scss b/app/assets/stylesheets/themes/repositories.scss
index 389c7b402..f75d5c009 100644
--- a/app/assets/stylesheets/themes/repositories.scss
+++ b/app/assets/stylesheets/themes/repositories.scss
@@ -5,13 +5,17 @@
 
   .list-group-item {
     padding: 28px;
+  }
 
-    .controlls {
-      margin-top: -18px;
-    }
+  .column-name {
+    margin-top: 10px;
+  }
+}
 
-    span {
-      margin-top: -10px;
+@media only screen and (max-width: 768px) {
+  .repository-columns-body {
+    .delete-column {
+      margin-top: 5px;
     }
   }
 }
diff --git a/app/views/repository_columns/index.html.erb b/app/views/repository_columns/index.html.erb
index 46b8d13e8..e8943b850 100644
--- a/app/views/repository_columns/index.html.erb
+++ b/app/views/repository_columns/index.html.erb
@@ -32,21 +32,25 @@
       <% else %>
         <% @repository_columns.each do |column| %>
           <% cache column do %>
-            <li class="list-group-item"
+            <li class="list-group-item row"
                 data-id="<%= column.id %>"
                 data-destroy-url="<%= repository_columns_destroy_html_path(@repository, column) %>"
                 data-edit-url="<%= edit_repository_repository_column_path(@repository, column) %>">
-              <span class="pull-left"><%= column.name %></span>
-              <span class="controlls pull-right">
-                <button class="btn btn-default" data-action="edit">
-                  <span class="fas fa-pencil-alt"></span>
-                  <%=t 'libraries.repository_columns.index.edit_column'%>
-                </button>
-                <button class="btn btn-default" data-action="destroy">
-                  <span class="glyphicon glyphicon-trash"></span>
-                  <%=t 'libraries.repository_columns.index.delete_column'%>
-                </button>
-              </span>
+              <div class="col-xs-8">
+                <span class="pull-left column-name"><%= column.name %></span>
+              </div>
+              <div class="col-xs-4">
+                <span class="controlls pull-right">
+                  <button class="btn btn-default" data-action="edit">
+                    <span class="fas fa-pencil-alt"></span>
+                    <%=t 'libraries.repository_columns.index.edit_column'%>
+                  </button>&nbsp;
+                  <button class="btn btn-default delete-column" data-action="destroy">
+                    <span class="glyphicon glyphicon-trash"></span>
+                    <%=t 'libraries.repository_columns.index.delete_column'%>
+                  </button>
+                </span>
+            </div>
             </li>
           <% end %>
         <% end %>