Reordering and nesting site components | Doghouse SaaS Knowledge Base     [Skip to content](#main)  [ ![Doghouse SaaS Knowledge Base](/storage/branding/01M3N8PQ7PSDNQBBKKJM6XGW03.svg) ](https://nginx.deploy-lagoon-production.districtcms-docs.dh1.amazee.io)  [Product documentation](/articles) [Roadmap](/roadmap)   Toggle navigation      

  [Product documentation](/articles) [Roadmap](/roadmap)  

  1. [Home](/) ›
2. [Product documentation](/articles) ›
3. [Page building & display](/articles?category=6) ›
4. Reordering and nesting site components

 Reordering and nesting site components
======================================

Updated 5 days ago · 3 min read

 Search     Search  

Overview
--------

The Components area holds the components that make up an article or landing page, in the order visitors see them. You change that order by dragging a component's handle, or by typing a number for each one.

> **💡 Note:** Dragging rearranges components you already have. To put a new one on the page, see [**Add, remove, and delete site components**](/articles/add-remove-and-delete-site-components).

---

Dragging a component
--------------------

1. Open the article or landing page for editing and stay on the **Content** tab.
2. Find the move handle at the left of the component you want to move. Hovering over it shows **Change order**.
3. Drag it up or down to its new position.
4. Press **Save**.

![The Components list on the homepage form, with the move handle at the left of the first component outlined in red.](/storage/wWKXlezE5XzFR80IZpRnbJiqZd1uwbCshR269CjD.png)

![Animation: dragging the Value chips component by its handle to the top of the Components list, and the You have unsaved changes message appearing.](/storage/LoaxpdwVWkIqrQklP6nusLCaVZgVDWIgV1iymnpB.gif)

> **⚠️ Important:** As soon as you move something, the list shows **You have unsaved changes**. The new order is kept only once you press **Save**, and leaving the form before then discards it.

### Items inside a component

Cards in a Card grid, questions in an Accordion and steps in Process steps have their own handles, and reorder the same way within their component. To move an item into a different component, use the drag and drop view below.

---

Using the drag and drop view
----------------------------

The drag and drop view shows every component on the page as one nested list, with each component's items indented underneath. It makes a long move easier, and it is the only way to move an item from one component into another.

1. Press the actions button (⋮) beside **Edit all**, at the top of the Components list.
2. Choose **Drag & drop**. (**Collapse all**, in the same menu, closes any components you have open.)

![The Components heading with its actions menu open, offering Collapse all and Drag and drop, outlined in red.](/storage/K71jaB0rqYnHPIWZ1necUDhZi83UaQ9vqdeSQpKz.png)

3. Drag a component or an item by its move handle to its new place. An item can only be dropped into a component that accepts it: a card can move into another Card grid, but not into an Accordion.
4. Press **Complete drag & drop** to return to the normal list.
5. Press **Save**.

![The drag and drop view, listing every component with its cards and highlights indented underneath, and the Complete drag and drop button outlined in red.](/storage/zrGSgIZAyA1wFS0LerLl551gmz6XFb4UfQUlWya7.png)

> **⚠️ Important: Complete drag & drop** only closes the view. It does not save the page. The new order is kept only once you press **Save**.

---

If you cannot drag
------------------

If dragging is awkward, on a long list or a device without a mouse, set the order by number instead.

1. Above the list, press **Show row weights**. An **Order** column appears, with a number for each component, and the move handles disappear.
2. Set a number for each component. Components run from the lowest number at the top of the page to the highest at the bottom.
3. Press **Save**.

![The Components list with row weights shown, and the Order column of numbers outlined in red.](/storage/NW110RSMHozKD9tCfxaPKwdj97CWz6vszrCdX1px.png)

Press **Hide row weights** to bring the move handles back.

  Related articles 
------------------

- [ Site components overview → ](/articles/site-components-overview)
- [ Adding and removing site components → ](/articles/add-remove-and-delete-site-components)
- [ Creating content and choosing the right content type → ](/articles/creating-content-and-choosing-the-right-content-type)

 Was this article helpful?
-------------------------

Your feedback helps us prioritise what to rewrite.

      Yes     No  

 [    Back to Page building & display ](/articles?category=6) 

 On this page 

**Need additional help?** 
Submit a support request through the [**support portal** ](https://doghouse.atlassian.net/servicedesk/customer/portals)or email 

 © 2026 [Doghouse SaaS](https://doghouse.agency) [Glossary](/articles/glossary)