Source order and the Grid

We can put almost anything anywhere with grid, so source order becomes a very real discussion. we should always start with “mobile first”, but where we put stuff as the screen grows becomes way easier.

We can stack things in a simple way for mobile layouts:

   +-------+  
   |       |  
   |  a    |  
   |       |  
   +-------+  
   |       |  
   |  b    |  
   |       |  
   +-------+  
   |       |  
   |  c    |  
   |       |  
   +-------+  

And then move things around in unique ways as we gain more screen space:

   +-----------+--------+  
   |           |        |  
   |  a        |  b     |  
   |           |        |  
   +-----------+        |  
   |           |        |  
   |  c        |        |  
   |           |        |  
   +-----------+--------+