diff --git a/app/assets/javascripts/tracks_pages.js b/app/assets/javascripts/tracks_pages.js
index 70947be1..d70bab20 100644
--- a/app/assets/javascripts/tracks_pages.js
+++ b/app/assets/javascripts/tracks_pages.js
@@ -184,5 +184,21 @@ var TracksPages = {
 
     /* fade flashes and alerts in automatically */
     $(".alert").fadeOut(8000);
+  }, sort_container: function(container) {
+    function comparator(a, b) {
+        var contentA = $(a).attr('data-sort') || '';
+        var contentB = $(b).attr('data-sort') || '';
+        if (contentA > contentB) {
+            return 1;
+        }
+        if (contentB > contentA) {
+            return -1;
+        }
+        return 0;
+    }
+
+    var unsortedActions = container.children();
+    var sortedChildren = unsortedActions.sort(comparator);
+    container.append(sortedChildren);
   }
 };
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index 04687a14..a3624619 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -365,6 +365,18 @@ module TodosHelper
     text_field_tag name, value, {"size" => 12, "id" => id, "class" => "Date", "autocomplete" => "off"}.update(options.stringify_keys)
   end
 
+  def sort_key(todo)
+    # actions are sorted using {order("todos.due IS NULL, todos.due ASC, todos.created_at ASC")}
+    # the JavaScript frontend sorts using unicode/ascii
+    format = "%Y%m%d%H%M%S%L"
+    if todo.due?
+      sort_by_due = todo.due.strftime format
+    else
+      sort_by_due = "Z" * 17 # length of format string
+    end
+    sort_by_due + todo.created_at.strftime(format)
+  end
+
   # === helpers for default layout
 
   def default_contexts_for_autocomplete
diff --git a/app/views/todos/_todo.html.erb b/app/views/todos/_todo.html.erb
index 13335d37..16e197e9 100644
--- a/app/views/todos/_todo.html.erb
+++ b/app/views/todos/_todo.html.erb
@@ -12,7 +12,7 @@ parameters += "&_tag_name=#{@tag_name}" if @source_view == 'tag'
 # also make different caches per source_view to handle difference in showing [C] and [P]
 cache [todo, current_user.date.strftime("%Y%m%d"), @source_view, current_user.prefs.verbose_action_descriptors] do
 %>
-  <div id="<%= dom_id(todo) %>" class="item-container">
+  <div id="<%= dom_id(todo) %>" class="item-container" data-sort="<%= sort_key(todo) %>">
     <div id="<%= dom_id(todo, 'line') %>" class="item-show">
       <%= remote_star_icon(todo) %>
       <%= remote_toggle_checkbox(todo) %>
diff --git a/app/views/todos/_update_successful.js.erb b/app/views/todos/_update_successful.js.erb
index 40315920..2403adb0 100644
--- a/app/views/todos/_update_successful.js.erb
+++ b/app/views/todos/_update_successful.js.erb
@@ -29,7 +29,9 @@ remove_todo: function(next_steps) {
   });
 },
 add_to_existing_container: function(next_steps) {
-  $('#<%= item_container_id(@todo) %>_items').append(<%=object_name%>.html_for_todo());
+  var container = $('#<%= item_container_id(@todo) %>_items');
+  container.append(<%=object_name%>.html_for_todo());
+  TracksPages.sort_container(container);
   <% if source_view_is_one_of(:calendar) -%>
     next_steps.go();
     <% if (@target_context_count==1) || ( (@todo.deferred? || @todo.pending?) && @remaining_deferred_or_pending_count == 1) -%>
@@ -55,7 +57,8 @@ add_to_existing_container: function(next_steps) {
   <% end -%>
 },
 replace_todo: function(next_steps) {
-  $('#<%= dom_id(@todo) %>').html(<%=object_name%>.html_for_todo());
+  $('#<%= dom_id(@todo) %>').replaceWith(<%=object_name%>.html_for_todo());
+  TracksPages.sort_container($('#<%= item_container_id(@todo) %>_items'));
   next_steps.go();
 },
 hide_container: function(next_steps) {
diff --git a/app/views/todos/create.js.erb b/app/views/todos/create.js.erb
index e7d35b4a..4e36a99d 100644
--- a/app/views/todos/create.js.erb
+++ b/app/views/todos/create.js.erb
@@ -49,7 +49,10 @@
 
   function add_todo_to_existing_container(next_steps) {
     $('#<%= empty_container_msg_div_id %>').hide();
-    $('#<%= item_container_id(@todo) %>_items').append(html_for_new_todo());
+    var container = $('#<%= item_container_id(@todo) %>_items');
+    container.append(html_for_new_todo());
+    TracksPages.sort_container(container);
+
     $('#<%= item_container_id(@todo) %>').slideDown(500, function() {
       $('#<%= dom_id(@todo) %>').effect('highlight', {}, 2000 );
       next_steps.go();
diff --git a/app/views/todos/destroy.js.erb b/app/views/todos/destroy.js.erb
index fa895ef5..b6d14bd8 100644
--- a/app/views/todos/destroy.js.erb
+++ b/app/views/todos/destroy.js.erb
@@ -54,7 +54,9 @@ function show_new_todo_if_todo_was_recurring() {
   <% if @todo.from_recurring_todo? -%>
     <%  unless @new_recurring_todo.nil? || @new_recurring_todo.deferred? -%>
       TodoItemsContainer.ensureVisibleWithEffectAppear("<%=item_container_id(@new_recurring_todo)%>");
-      $('#<%=item_container_id(@new_recurring_todo)%>_items').append(html_for_new_recurring_todo());
+      var container = $('#<%=item_container_id(@new_recurring_todo)%>_items');
+      container.append(html_for_new_recurring_todo());
+      TracksPages.sort_container(container);
       $('#<%= dom_id(@new_recurring_todo, 'line')%>').effect('highlight', {}, 2000 );
       TracksPages.page_inform("<%=t('todos.recurring_action_deleted')%>");
     <% else -%>
@@ -75,11 +77,15 @@ function activate_pending_todos() {
         if source_view_is_one_of(:project,:tag) -%>
           $('#<%= dom_id(t) %>').fadeOut(400, function() {
             $('#<%= dom_id(t) %>').remove();
-            $('#<%= item_container_id(t) %>_items').append("<%= html %>");
+            var container = $('#<%= item_container_id(t) %>_items');
+            container.append("<%= html %>");
+            TracksPages.sort_container(container);
             <%= "$('#deferred_pending_container-empty-d').show();".html_safe if @remaining_deferred_or_pending_count==0 -%>
           });
  <%     else -%>
-          $('#<%= item_container_id(t) %>_items').append("<%= html%>");
+          var container = $('#<%= item_container_id(t) %>_items');
+          container.append("<%= html%>");
+          TracksPages.sort_container(container);
  <%     end -%>
         TodoItems.highlight_todo('#<%= dom_id(t, 'line')%>');
  <%   end -%>
diff --git a/app/views/todos/remove_predecessor.js.erb b/app/views/todos/remove_predecessor.js.erb
index 803baa91..7733cc99 100644
--- a/app/views/todos/remove_predecessor.js.erb
+++ b/app/views/todos/remove_predecessor.js.erb
@@ -10,7 +10,7 @@
 <% end -%>
 
 function replace_updated_predecessor() {
-  $('#<%= dom_id(@predecessor) %>').html( html_for_predecessor() );
+  $('#<%= dom_id(@predecessor) %>').replaceWith( html_for_predecessor() );
 }
 
 function regenerate_predecessor_family() {
@@ -33,7 +33,9 @@ function update_successor() {
       $('#c<%= @successor.context_id %>').fadeIn(500, function() {});
       $('#no_todos_in_view').slideUp(100);
     <% end -%>
-    $('#<%=item_container_id(@successor)%>').append(html_for_new_successor());
+    var container = $('#<%=item_container_id(@successor)%>_items');
+    container.append(html_for_new_successor());
+    TracksPages.sort_container(container);
     $('#<%= dom_id(@successor, 'line')%>').effect('highlight', {}, 2000 ); <%
   elsif @successor.deferred? -%>
     $('#<%= dom_id(@successor)%>').html(html_for_new_successor()); <%
diff --git a/app/views/todos/toggle_check.js.erb b/app/views/todos/toggle_check.js.erb
index 6729a805..fc0f8dec 100644
--- a/app/views/todos/toggle_check.js.erb
+++ b/app/views/todos/toggle_check.js.erb
@@ -64,7 +64,9 @@ var <%= object_name %> = {
     next_steps.go();
   },
   add_todo_to_container: function(next_steps) {
-    $('#<%= item_container_id(@todo) %>_items').append(<%=object_name%>.html_for_todo());
+    var container = $('#<%= item_container_id(@todo) %>_items');
+    container.append(<%=object_name%>.html_for_todo());
+    TracksPages.sort_container(container);
     <% if should_make_context_visible -%>
       $('#<%= item_container_id(@todo) %>').slideDown(500, function() {
         $("#<%= empty_container_msg_div_id %>").slideUp(100);
@@ -82,7 +84,9 @@ var <%= object_name %> = {
     <%  # show new todo if the completed todo was recurring
       if @todo.from_recurring_todo?
         unless @new_recurring_todo.nil? || (@new_recurring_todo.deferred? && !source_view_is(:deferred)) -%>
-        $('#<%= item_container_id(@new_recurring_todo) %>_items').append(<%=object_name%>.html_for_recurring_todo());
+        var container = $('#<%= item_container_id(@new_recurring_todo) %>_items');
+        conainer.append(<%=object_name%>.html_for_recurring_todo());
+        TracksPages.sort_container(container);
         $('#c<%= @new_recurring_todo.context_id %>').slideDown(500, function() {
           <%=object_name%>.highlight_updated_recurring_todo(next_steps);
         });
@@ -123,11 +127,15 @@ var <%= object_name %> = {
           if source_view_is_one_of(:project,:tag) -%>
             $('#<%= dom_id(t) %>').slideUp(400, function() {
               $('#<%= dom_id(t) %>').remove();
-              $('#<%= item_container_id(t) %>_items').append("<%= html  %>");
+              var container = $('#<%= item_container_id(t) %>_items');
+              container.append("<%= html  %>");
+              TracksPages.sort_container(container);
               <%= "$('#deferred_pending_container-empty-d').show();".html_safe if @remaining_deferred_or_pending_count==0 -%>
             });
    <%     else -%>
-            $('#<%= item_container_id(t) %>_items').append("<%= html%>");
+            var container = $('#<%= item_container_id(t) %>_items');
+            container.append("<%= html%>");
+            TracksPages.sort_container(container);
    <%     end -%>
           TodoItems.highlight_todo('#<%= dom_id(t)%>');
    <%   end -%>