Flex layout ignoring order property

I have a .sheet-label-under on my input-field handlebars template: < div   class= "sheet-input-field  {{ classes }} " >      < label   class= " {{ labelClass }} " > {{ labelText }} </ label >      {{ #if_any   type   'text'   'number' }}      < input   type= " {{ type }} "   class= " {{ inputClass }} "   name= "attr_ {{ name }} "          {{ #if   value }}   value= " {{ value }} "   {{ /if }}  />      {{ /if_any }}      {{ #if_eq   type   "select" }}      < select   class= " {{ inputClass }} "   name= "attr_ {{ name }} " >          {{ #each   options   as  | option   id | }}          < option   key= " {{ varProperty   option   ../valueProperty }} " > {{ varProperty   option   ../textProperty }} </ option >          {{ /each }}      </ select >      {{ /if_eq }} </ div > .sheet-input-field  {      box-sizing :  border-box ;      display :  flex ;      &.sheet-label-under  {          label  {              order :  2 ;              font-size :  smaller         }          input ,  select  {              order :  1 ;         }     } } I would expect this to place the label after the input or select element. Unfortunately that doesn't happen.  I'm completely new to flex, so there is likely something I'm missing.  Any ideas? Edit: The sheet-label-under is applied by the classes variable passed in to the template during compilation.  I've confirmed it IS on the div element.

Could you show your final CSS? I'm pretty sure Roll20 doesn't support directly whatever you're using. And I'm unsure about your html, is that including syntax for a rolltemplate, because otherwise it doesn't really look like pure html to me either. Someone else might understand your code as it is, but I'm unfortunately not one of them, I'd need to see the pure html/css.

That's a handlebars template and less file prior to compilation down to pure html and css... they compile too... < div   class = "sheet-input-field sheet-1-2 sheet-label-under" >              < label   class = " sheet-1-1" > Character Name </ label >              < input   type = "text"   class = " "   name = "attr_character_name"                   />          </ div > .sheet-input-field  {    box-sizing :  border-box ;    display :  flex ; } .sheet-input-field.sheet-label-under   label  {    order :  2 ;    font-size :  smaller ; } .sheet-input-field.sheet-label-under   input , .sheet-input-field.sheet-label-under   select  {    order :  1 ; } Edit: I write the code using less, handlebars, and typescript and then use a build task in vscode to compile it down to html, css, and javascript, which Roll20 accepts.

So, this works fine for me. What behavior are you seeing? and what behavior are you expecting? EDIT: My example code HTML <div class='container'>     <label>This is the label</label>     <input type='text' name='attr_input' value='This is the input'/> </div> CSS .sheet-container{     display:flex;     width:50%; } .sheet-container label{     order:2; } .sheet-container input{     order:1; } Output I'd check the inspector to make sure your styles are being applied like you think.

I was still getting the label before the text box, however I identified the problem.  I had another class acting on the label as well which was messing with it's positioning.