While working on my site and developing a different checkout process. I redesigned the shopping cart part for responsive display. I found the old style Order Steps didn't play will with my Responsive shopping cart. So I used the same concept I did in redesigning the cart and used it on the Order Steps.

The idea is to divide up the space within the container so each box has room to display (100% / 4 = 25%) less some 24.925% each box. Then changing the size of each box to 100% when the screen is reduced to 560px forcing them to stack in order.

The arrows can be changed, the step image can be changed, the wording is in the language file and can be changed, the number of boxes is 4, but can be increased or decreased, I use 5 right now.

Available in the downloads section here, also up on my getHub page.

The step images can be any size, but I think they should be simple and fun. I have some ideas I'll upload to my getHub page or you can create your own too. I used an image 600x270px, just remember to use % for the size in the code.