Adjust the order in which components are provided

Before it was rather confusing for me as other component doesn't
use some component and later also isn't used in the page so it
was rather difficult to find out how both components end up
in the page.

I hope that by reversing the order of the components so that first
people are introduced to other_component, which is then used in
some component which is then used in the page this is made more
understandable.

Also added another note mentioning this.

Author: PragTob

docs/concepts/component.md

@@ -219,26 +219,19 @@ This gets rendered into HTML as shown below. Notice that the `@foo` from the com
 To use *component instance scope slots*, first define slots within a static component:
 
 ```ruby
-class Components::Some::Component < Matestack::Ui::StaticComponent
+class Components::Other::Component < Matestack::Ui::StaticComponent
 
   def prepare
-    @foo = "foo from component"
+    @foo = "foo from other component"
   end
 
   def response
     components {
-      div id: "my-component" do
-        custom_other_component slots: {
-          my_slot_from_component: my_slot_from_component,
-          my_slot_from_page: @options[:my_slot_from_page]
-        }
-      end
-    }
-  end
-
-  def my_slot_from_component
-    slot {
-      span id: "my-slot-from-component" do
+      div id: "my-other-component" do
+        slot @options[:slots][:my_slot_from_component]
+        br
+        slot @options[:slots][:my_slot_from_page]
+        br
         plain @foo
       end
     }
@@ -247,22 +240,29 @@ class Components::Some::Component < Matestack::Ui::StaticComponent
 end
 ```
 
-And another component:
+and also in some component:
 
 ```ruby
-class Components::Other::Component < Matestack::Ui::StaticComponent
+class Components::Some::Component < Matestack::Ui::StaticComponent
 
   def prepare
-    @foo = "foo from other component"
+    @foo = "foo from component"
   end
 
   def response
     components {
-      div id: "my-other-component" do
-        slot @options[:slots][:my_slot_from_component]
-        br
-        slot @options[:slots][:my_slot_from_page]
-        br
+      div id: "my-component" do
+        custom_other_component slots: {
+          my_slot_from_component: my_slot_from_component,
+          my_slot_from_page: @options[:my_slot_from_page]
+        }
+      end
+    }
+  end
+
+  def my_slot_from_component
+    slot {
+      span id: "my-slot-from-component" do
         plain @foo
       end
     }
@@ -271,7 +271,7 @@ class Components::Other::Component < Matestack::Ui::StaticComponent
 end
 ```
 
-Then, put both components to use on the example page:
+Then, put both components (note that some component uses other component so that's how they're both in here) to use on the example page:
 
 ```ruby
 class Pages::ExamplePage < Matestack::Ui::Page
@@ -367,7 +367,7 @@ Not a fancy example, but this is the result:
 <div id="div-on-page">
   <div id="my-component">
     foo from page
-  </div>  
+  </div>
 </div>
 ```