ブロックは並び替えが簡単・・・・少なくとも、ソースコード書き換えるよりは楽に、並び替えすることが可能です。
方法1 ドラッグ&ドロップ
動かしたいブロックを選択した時に、選択したブロックの上に「ツールボックス」が表示されます。ツールボックス内の最も左のアイコンは、ブロックの種類を表すアイコンです。その右隣に、サイコロの6の目のようなマークがあります。
画像の赤丸に示した部分を、クリックし続けたまま動かす（ドラッグする）と、ブロックを移動させることができます。目的の場所までドラッグして、ドロップ（クリックし続けた状態のマウスから指を離す）します。はい簡単！
簡単で直感的ですが、狙ったところにうまく動かせない場合もあります。特に狭い画面だと大変・・・・。
そういう時は、次の方法の方が便利な場合もあります。
方法2 上下矢印ボタンを押して並べ替える
動かしたいブロックを選択した時に、ブロックの種類を表す「サイコロの6の目のようなマーク」の右隣に上下の矢印があります。
上下の矢印アイコンはボタンになっていて、押した方向へひとつ分ブロックが移動します。
方法1では精緻な動作でブロックを移動することが難しい場合があるので、ドラッグで大雑把に場所を移動して、ひとつか2つずらす時は矢印の方がやりすいかなー、と個人的には思っています。
余談：ブロックの「選択」方法
表示されている画像なり文字なりを狙ってクリックすれば、その動作だけでブロックを選ぶことができます。編集中のブロックの近くにあるブロックであれば、その選択方法で良いのですが、ページの上の方を選択中の時に、ひと飛びに下の方を見たい時もあります。スクロールしても、良いのですが、別の方法をひとつ、ご紹介。
編集画面の上の方にあるツールバーの中に、階段のようなアイコンがあります。
「リスト表示」のボタンです。これを押すと、エディタ内のブロックが一覧できます。
今編集中でフォーカスされているブロックは、ブルーの背景がついているところです。マウスオーバーしている（＝ブルーの枠線で囲まれている）のは、最初の段落ですが、クリックすると、ひと飛びにそこへ移動します。
ブロックは種類によって「入れ子（ネスト）」になっているものもあるので、子要素や親要素をワンクリックで選択するのにも便利かなと思います。