Hey,
I am curious if the order of the elements/cards is so correct or if there is an error here. I mean I can see some sort of pattern on the arrangement - but it dosen’t really make sense to me.
Take a look on the position numbers.
Thanks.
As you don’t provide info in regards to which “View-type” you are using and also not have provided the your code of the dashboards, No-one can tell, just guessing !
Maybe you have some vertical stacks, and most likely you also use “masonry-view” which have it’s ways to structure the cards in a view, depending upon resolution … but as mention, and said MaYbe
oh, sure - let me give you more information’s. Im using the default view and the structure looks fine on the smartphone but not on my workstation.
and here’s the code
views:
- title: Licht
path: light
icon: mdi:lightbulb
badges: []
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:lightbulb
icon_color: >-
{% if (states('sensor.count_lights_on') | int) > 0 %} orange
{% endif %}
content: >-
{% if (states('sensor.count_lights_on') | int) > 0 %}
{{states('sensor.count_lights_on')}} {% endif %}
alignment: end
- type: custom:mushroom-title-card
title: Licht
- type: custom:mushroom-light-card
entity: light.licht_haus
tap_action:
action: none
hold_action:
action: toggle
icon: mdi:home-lightbulb-outline
secondary_info: none
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: UG
secondary: ''
icon: mdi:home-floor-negative-1
layout: vertical
entity: light.licht_keller
icon_color: |-
{% if is_state('light.licht_keller','on') %}
orange
{% endif %}
tap_action:
action: none
hold_action:
action: toggle
- type: custom:mushroom-template-card
primary: EG
secondary: ''
icon: mdi:home-floor-0
layout: vertical
icon_color: |-
{% if is_state('light.licht_erdgeschoss','on') %}
orange
{% endif %}
entity: light.licht_erdgeschoss
tap_action:
action: none
hold_action:
action: toggle
- type: custom:mushroom-template-card
primary: OG
secondary: ''
icon: mdi:home-floor-1
layout: vertical
entity: light.licht_obergeschoss
icon_color: |-
{% if is_state('light.licht_obergeschoss','on') %}
orange
{% endif %}
tap_action:
action: none
hold_action:
action: toggle
- type: custom:mushroom-template-card
primary: DG
secondary: ''
icon: mdi:home-floor-2
layout: vertical
entity: light.licht_dachgeschoss
icon_color: |-
{% if is_state('light.licht_dachgeschoss','on') %}
orange
{% endif %}
tap_action:
action: none
hold_action:
action: toggle
- type: custom:mushroom-title-card
title: ''
subtitle: Wohnzimmer
- type: custom:mushroom-light-card
entity: light.licht_wohnzimmer
tap_action:
action: none
hold_action:
action: toggle
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.wohnzimmer_licht_links
name: Licht Links
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.wohnzimmer_licht_rechts
name: Licht Rechts
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.wohnzimmer_licht_stehlampe_light
icon: mdi:floor-lamp
name: Stehlampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-title-card
title: ''
subtitle: Esszimmer
- type: custom:mushroom-light-card
entity: light.esszimmer_licht
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
name: Licht
- type: custom:mushroom-title-card
title: ''
subtitle: Küche
- type: custom:mushroom-light-card
entity: light.licht_kuche
tap_action:
action: none
hold_action:
action: toggle
icon: mdi:ceiling-light-multiple
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.kuche_licht_links
name: Licht Links
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.kuche_licht_rechts
name: Licht Rechts
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-title-card
title: ''
subtitle: Gäste WC
- type: custom:mushroom-light-card
entity: light.gastewc_licht
name: Licht
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-title-card
title: ''
subtitle: Schlafzimmer
- type: custom:mushroom-light-card
entity: light.schlafzimmer_licht
icon: mdi:ceiling-light
collapsible_controls: true
show_brightness_control: true
name: Licht
- type: custom:mushroom-title-card
title: ''
subtitle: Max
- type: custom:mushroom-light-card
entity: light.kinderzimmer_licht
show_brightness_control: false
icon: mdi:ceiling-light
name: Licht
- type: custom:mushroom-title-card
title: ''
subtitle: Noah
- type: custom:mushroom-light-card
entity: light.kinderzimmer2_licht
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
name: Licht
- type: custom:mushroom-title-card
title: ''
subtitle: Badezimmer
- type: custom:mushroom-light-card
entity: light.badezimmer_licht
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-title-card
title: ''
subtitle: Dachgeschoss
- type: custom:mushroom-light-card
entity: light.licht_dachgeschoss
icon: mdi:ceiling-light-multiple
secondary_info: none
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dachgeschoss_licht_vorne
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
name: Vorne
- type: custom:mushroom-light-card
entity: light.dachgeschoss_licht_hinten
name: Hinten
icon: mdi:ceiling-light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-title-card
title: ''
subtitle: Terrase
- type: custom:mushroom-light-card
entity: light.terrasse_licht
icon: mdi:coach-lamp
Thanks for your feedback.
Well it’s pretty obvious, you first use 2 Vertical-stacks(with some cards inside, they never change the order inside the “stack”, then you use 2 mushroom-cards, then another vertical-stack(these cards also never change “order” inside the stack , then you again have some “individual” cards, and another vertical-stack, and some individual cards, and a stack
So if ALL cards, when on you phone, is “in the order” as you want i guess your are fine, but obviously it will look very different if you open your view on a big screen, or ipad( whether you have it vertical or horizontal) , Maybe you will even notice “Changes in the Order” if you try to “flip” your phone, to Horizontal-View ( you might get 2 column of cards ) torched around cording to the functionality of “Masonry”
Did you really build your view on your Phone, or were you just Damn lucky that all the cards ended up in right order, there( after building on a bigger screen ) ?
Ive created the dashboard on my workstation just adding one card after the other card using the GUI. Ive checked the order of the cards on my phone after adding new cards.
Putting my phone in the Horizontal-View leads to the same view like on my workstation.
So… as you said: damn luck 
So I will take a look on the documentation - I understood that I need to somehow break the vertical-stack.
My understanding of how it works is obviously wrong.
I thought its a kind of adding cards, line by line. And easily put a horizontal stack in a line to get more columns for that specific line and based on the display width the dashboard will arrange the cards in my order on multiple columns to fill the whole screen. So a kind of FIFO if I would need to compare with something other 
I have also played around with various view-setup(for different Dashboards), on my laptop, to get the same order-setup on my phone, vs 4K-TV
Best result ( in Masonry-view ) is with vertical-stacks, with what ever inside, and each fill about the screen-high of my laptop ( it’s important they are about the same High ) , so with 3 columns-in masonry, the 3 stacks turns up “beside” eachother, filling the screen, and on the phone(vertical, each vertical.stack/view-column, comes below eachother ( in the order column 1.2.3 )
Depends as mention upon the size of the cards, a vertical-stack can fill the height of i.e 3 cards( but still counts as 1 card ! )(1 card can also have the hight of 2 smal cards), and so masonry “tors” these cards around, (when possible) , on a big screen with i.e 2-3-4 columns, and it tries to “fill/level out” rows and columns … And it’s very anoing, as you say.
Go to your Workstation, click edit:dashboard, pick the highest number ( 28), and then the " - " , to give it next lower (27) , then keep going until it’s number 1 , AND see what’s happens with the order of your view !
I wont say, “then you’ll understand” , it’s more like, you wont understand 
It wont have such a big effect as your vertical stack is only with 2-3 small cards, but if you have higher cards, or 3-4 cards in a stack, it would move around several cards each time, and you will not find it funny or easy to place the cards where you want them
I will play around a bit with it.
Thanks a lot for your feedback and time helping me 
Well, sorry i just noticed it was Horizontal stacks you had , thou still the way masonry works, on a big screen, is as mention above, fill the columns(to about big card high, or , then next column, then next, then first, , second, third etc, But if you put in a High card, or cards in vertical-stack(higher than 2 normal card, ) it tries to “level out” … hope you still understand
PS: i only have 2 view with masonry(1 with 3 vertical-stack), i gave up upon a “Clean” masonry
I have a similar issue/situation I can’t understand/solve.
I have an odd numbering position for some cards (please see the arrow in the picture) but I don’t think I’m using any specific setting causing that.
Any help/explanation is appreciated.
title: Casa
views:
- title: ARIA
path: aria
icon: mdi:air-filter
cards:
- type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '0'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Non disponibile
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '1'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Buona
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '2'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Normale
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '3'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Accettabile
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '4'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Scarsa
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '5'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Molto scarsa
- type: conditional
conditions:
- condition: state
entity: sensor.eaqi_stazione
state: '6'
card:
type: gauge
needle: false
segments:
- from: 1
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 3
color: '#FFC300'
- from: 4
color: '#fa5050'
- from: 5
color: '#960032'
- from: 6
color: '#7d2181'
min: 0.5
max: 6
entity: sensor.eaqi_stazione
name: EAQI - Estremamente scarsa
- type: gauge
entity: sensor.pm10_stazione_gauge
needle: true
segments:
- from: 0
color: '#50f0e6'
- from: 20
color: '#50ccaa'
- from: 35
color: '#FFC300'
- from: 50
color: '#db4437'
- from: 100
color: '#900030'
- from: 150
color: '#7d2181'
min: 0
max: 200
- type: gauge
entity: sensor.biossido_azoto_stazione_gauge
needle: true
segments:
- from: 0
color: '#50f0e6'
- from: 100
color: '#50ccaa'
- from: 200
color: '#FFC300'
- from: 350
color: '#db4437'
- from: 500
color: '#900030'
- from: 750
color: '#7d2181'
max: 850
min: 0
- type: gauge
entity: sensor.ozono_stazione_gauge
needle: true
segments:
- from: 0
color: '#50f0e6'
- from: 80
color: '#50ccaa'
- from: 120
color: '#FFC300'
- from: 180
color: '#fa5050'
- from: 240
color: '#960032'
- from: 380
color: '#7d2181'
min: 0
max: 480
- type: gauge
entity: sensor.monossido_carbonio_stazione_gauge
min: 0
max: 25
needle: true
segments:
- from: 0
color: '#50f0e6'
- from: 4
color: '#50ccaa'
- from: 7
color: '#FFC300'
- from: 10
color: '#fa5050'
- from: 20
color: '#960032'
- type: gauge
entity: sensor.benzene_stazione_gauge
needle: true
segments:
- from: 0
color: '#50f0e6'
- from: 2
color: '#50ccaa'
- from: 4
color: '#FFC300'
- from: 5
color: '#fa5050'
- from: 10
color: '#960032'
max: 15