How can I reorder div blocks in Webflow to put one on top during mobile optimization?

Published on
September 22, 2023

To reorder div blocks in Webflow and put one on top during mobile optimization, you can follow these steps:

  1. Open your Webflow project and go to the Designer view.
  2. Select the div block that you want to reorder.
  3. In the project navigator on the left-hand side, locate the Styles panel for the selected div block.
  4. Click on the Flexbox section within the Styles panel.
  5. Enable Flexbox for the parent container of the div block you want to reorder by setting its display property to "flex".
  6. Once Flexbox is enabled, you'll notice that the child div blocks within the parent container are displayed in a row by default.
  7. To change the order, select the div block that you want to bring to the top during mobile optimization.
  8. In the Styles panel, go to the Flexbox section and set the "order" property for that particular div block to a negative value, such as -1.
  • This negative value will make it appear before the other div blocks when viewed on mobile devices.
  • Div blocks with lower negative values will be displayed before those with higher negative values.

By following these steps, you can reorder div blocks and ensure that one appears on top during mobile optimization.

Additional Questions:

  1. How do I reorder div blocks in Webflow for desktop optimization?
  2. Can I reorder div blocks in Webflow without using Flexbox?
  3. Is it possible to reorder div blocks in Webflow using custom code?