docs: change Diataxis categories to the standard order (#559)

The Diataxis categories in Pebble are currently ordered: Tutorial,
How-to guides, Explanation, Reference. The standard order should be
Tutorial, How-to guides, _Reference, Explanation_.

The 2x2 grid of cards on the homepage actually has the correct layout
(matching the [Diataxis map](https://diataxis.fr/_images/diataxis.png)):

```
Tutorial     How-to guides
Explanation  Reference
```

This PR:

- Reorders the Diataxis categories to Tutorial, How-to guides,
Reference, Explanation.
- Uses `:reverse:` in the grid source to swap Reference and Explanation,
instead of ordering them as Explanation > Reference in the grid source.
We need to do it this way so that Reference stacks above Explanation if
the browser window is narrow.

In short, we're matching how Ops is set up. See
https://github.com/canonical/operator/blob/main/docs/index.md?plain=1#L54

docs/index.md

@@ -24,18 +24,19 @@ Pebble is useful for developers who are building [Juju charms on Kubernetes](htt
 ````
 
 ````{grid} 1 1 2 2
-```{grid-item-card} [Explanation](explanation/index)
-**Discussion and clarification** of key topics
-- [General model](explanation/general-model.md)
-- [API and clients](explanation/api-and-clients.md)
-```
-
+:reverse:
 ```{grid-item-card} [Reference](reference/index)
 **Technical information**
 - [Layer specification](reference/layer-specification)
 - [CLI commands](reference/cli-commands)
 - [Pebble in containers](reference/pebble-in-containers)
 ```
+
+```{grid-item-card} [Explanation](explanation/index)
+**Discussion and clarification** of key topics
+- [General model](explanation/general-model.md)
+- [API and clients](explanation/api-and-clients.md)
+```
 ````
 
 ## Releases
@@ -60,6 +61,6 @@ The Pebble project is sponsored by [Canonical Ltd](https://www.canonical.com).
 
 :diataxis:Tutorial <tutorial/getting-started>
 :diataxis:how-to/index
-:diataxis:explanation/index
 :diataxis:reference/index
+:diataxis:explanation/index
 ```